【问题标题】:How properly bind an array with ngModel in angular 4?如何在角度 4 中正确地将数组与 ngModel 绑定?
【发布时间】:2018-04-10 00:44:03
【问题描述】:

假设我有一个数组 [1,2,3]。我想迭代所有项目并将每个项目绑定到 ngModel。当我在更改第一个元素后运行此代码时,第二个元素获得相同的值。有什么问题?

<div *ngFor="let x of array; let i = index;">
    <input type="number" [(ngModel)]="x[i]">
</div>

【问题讨论】:

标签: javascript angular ngmodel


【解决方案1】:

ngFor 默认情况下使用对象标识来比较值,这在使用原始值(数字、字符串、布尔值)时会中断,因为它们在修改时会改变标识)。使用trackBy 允许将ngFor 配置为zse 索引而不是身份:

<div *ngFor="let x of array; let i = index;trackBy:trackByIdx">
    <input type="number" [(ngModel)]="array[i]">
</div>
trackByIdx(index: number, obj: any): any {
  return index;
}

【讨论】:

  • 哇,太棒了,这花了我很多时间。我在一个组件中有一个输入字段,它失去了对每次按键的关注。这解决了它。如果使用对象数组并在对象中引用键,则您所说的简单字符串数组可以正常工作。
  • 这也为我修好了!谢谢!
猜你喜欢
  • 2020-06-10
  • 2019-03-10
  • 1970-01-01
  • 2019-04-20
  • 1970-01-01
  • 2021-09-02
  • 1970-01-01
  • 2019-07-15
  • 2021-06-05
相关资源
最近更新 更多