在角度 2+ 中为 ngmodel 设置动态变量参考

Posted 2023-03-13

【中文标题】在角度 2+ 中为 ngmodel 设置动态变量参考

【英文标题】：set dynamic variable reference for ngmodel in angular 2+

【发布时间】：2019-02-19 13:06:33

【问题描述】：

我有一个必须根据 json id, name 填充的表头 this.id 是我在组件中使用的 ngModel 名称，需要分别映射到自定义过滤器。

说，

 list=[id:ageSearch,name:age,id:adressSearch,name:adress]

所以当我输入第一个输入文本字段的值时，ageSearch 将被填充并且它必须过滤数据，类似于 addressSearch 现在我想知道如何在 ngfor 中动态映射变量 ageSearch,adressSearch。

我尝试过使用

 <div *ngFor="let item of list;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="item[id]" placeholder="item">
    </div>

但是，它填充值 ageSearch 而不是绑定变量。 谁能说我是否正在尝试可行的东西。 如果是这样，我怎样才能达到预期的流量。

预期的结果应该是

<div>
     <input [(ngModel)]="ageSearch" placeholder="item">
</div>
<div>
     <input [(ngModel)]="adressSearch" placeholder="item">
</div>

编辑： 在组件中，我将变量声明为 让年龄搜索：任何； 让地址搜索：任何；

这些值将被传递给自定义过滤器。 所以我必须设置输入的 ngModel 来绑定这些变量名，以便最初它们在加载时显示为空白，当我们输入值时，它们反映了 ageSearch 和 adressSearch 的值。 然后将其传递给自定义过滤器。 谢谢。

【参考方案1】：

经过一番尝试和尝试，我通过更换

<input [(ngModel)]="item.id" name="item.name" placeholder="item">

与

<input [(ngModel)]="this[item.id]" name="item.name" placeholder="item">

谢谢。

【参考方案2】：

改成这样：

<input [(value)]="item.id" placeholder="item">

或者到这个：

<input [(value)]="item['id']" placeholder="item">

如果您确实需要在示例中使用 ngModel，那么您还需要为其命名：

<input [(ngModel)]="item.id" name="item.name" placeholder="item">

【讨论】：

感谢 dexter 但它不起作用，我已经编辑了流程的解释，我想将变量引用映射到输入而不是值。