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

Question

我有一个 JSON 对象 - 其键是随机的 - 但在这种情况下我将使用 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

更改未反映在 data[item.key] 中，因为 keyvalue 管道 returns 新对象数组，其键与原始对象中的键相同。这意味着 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

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

Ng-Model not updating object from input tag (inside ngFor with keyvalue pipe)

key-value

ngmodel

angular