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

Question

我有一个 JSON 对象 - 其 key 是随机的 - 但在本例中我将使用 Id和Name举个例子:

{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] )。我可以使用ngModelChange或(input)="onchange"($event, item.key)"或[(ngModel)]="data[item.key]更新数据对象；但是，这会导致输入框失去焦点，因此一次只能更改一个字符。

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

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

Answer 1

更改不会反射(reflect)在 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-run Example