Ng-Model 未从输入标记更新对象（在带有键值管道的 ngFor 内）

Question

我有一个 JSON 对象 - 其键是随机的 - 但在本例中我将使用IdandName作为示例：

{Id: "someID", Name: "some name"}

我试图显示该对象的每个键和值 - 但允许用户使用标签编辑值<input>。

<div>
    <p *ngFor="let item of data | keyvalue">
        Key: {{item.key}}: <input [(ngModel)]="item.value">, {{item.value}}, {{data[item.key]}}</p>
</div>

当用户对输入框进行更改时，屏幕上的输入会发生更改（即item.value） - 但数据对象不会更新（即data[item.key]）。我可以使用ngModelChangeor(input)="onchange"($event, item.key)"或[(ngModel)]="data[item.key]来更新数据对象；但是，这会导致输入框失去焦点，因此一次只能更改一个字符。

我相信问题出在键值管道的某个地方 - 因为我使用预定义的键没有问题，即。<input [(ngModel)]="data.id">- 但显然因为对象内的键是随机的，我不能使用它。

那么：有没有办法使用 ngModel 来更新对象内的值。或者有没有其他方法来更新对象的值并将其显示在屏幕上和输入框中？

Answer 1

更改不会反映在中data[item.key]，因为keyvalue管道返回新对象的新数组，其键与原始对象中的键相同。这意味着ngModel突变不会对原始data对象产生影响。

您的解决方案是使用方括号表示法和trackBy选项：

html

<p *ngFor="let item of data | keyvalue; trackBy: trackByFn">
  Key: {{item.key}}: <input [(ngModel)]="data[item.key]">
        {{item.value}}, {{data[item.key]}}
</p>

ts

trackByFn(item) {
  return item;
}

NG 运行示例