Angular 8 ng适用于键值管道和 ng 模型。存在具有约束力的值(value)观问题

Question

我正在尝试让这个组件工作，它将获取键/值对的对象，将它们显示在输入标签中，并在原始对象上更改它们。假设我有一个像这样的对象:

{
    name: "John",
    id: "12345",
    preferences: { foo: "bar", biz: "baz" }
}

我可以调用<key-value [obj]="profile.preferences"></key-value>并且数据将在输入标签中成对打印。如果我随后将“foo”更改为“qux”，则属性键将会更改。为了实现这一点，我有一个键值组件，它的作用非常简单:

<div *ngFor="let pref of obj | keyvalue">
     <input [(ngModel)]="pref.key"><br />
     <input [(ngModel)]="pref.value"><br />
</div>

我觉得很简单。它是一个传入的对象，因此它是对原始对象的引用，并且我的应用程序的所有其他输入中的 ngModel 都在工作，所以我认为这没有错。

我做了很多调查，如果我有一个“changeKey/changeValue”函数来更改组件中的 this.obj 而不是依赖绑定(bind)，我确实可以让它工作:

<div *ngFor="let pref of obj | keyvalue">
     <input (change)="changeKey(/*???*/)" [ngModel]="pref.key"><br />
     <input (change)="changeValue(pref.key, pref.value) [ngModel]="pref.value"><br />
</div>

这适用于changeValue，因为我有需要更改的 key 和新值。但changeKey的问题是因为pref.key已更改我不知道要更新哪个 key 。

我觉得这不应该那么困难，我对 Angular 还很陌生，我希望这里有人知道发生了什么。谢谢。

Answer 1

KeyValuePipe简而言之:

Transforms Object or Map into an array of key value pairs.

keyvalue 管道从给定对象创建一个new 数组，因此，绑定(bind)到它不会影响原始对象。

对于您的问题，您可以将 ngModel 绑定(bind)到原始对象并直接指向它，而不是使用 (change) 事件监听器:

<div *ngFor="let prop of myObject | keyvalue">
      <input [(ngModel)]="myObject[prop.key]">
</div>