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>

我觉得这很简单。这是一个传入的对象，因此它是对原始对象的引用，而在我的应用程序的所有其他输入中，ngModels确实起作用，因此我认为这没有错。

我已经做了很多环顾，如果我有一个“ changeKey / changeValue”函数可以真正改变它的工作原理，而该函数可以更改组件中的this.obj而不是依赖于绑定：

<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，因为我拥有需要更改的密钥和新值。但是changeKey的问题是因为pref.key已更改，我不知道要更新哪个密钥。

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

Answer 1

您可以像以下代码一样定义changeKey函数。

在组件中

changeKey(prevKey, newKey) {
  const value = this.obj[prevKey];
  delete this.obj[prevKey];
  this.obj[newKey] = value;
}

在HTML

<input (change)="changeKey(pref.key, $event.target.value)" [ngModel]="pref.key"><br />

我创建了a working example on stackblitz。

Answer 2

在keyvalue中使用ngFor管道可以为您提供对象的副本，而不是引用的副本（类似于Object.entries()）。

您不需要change事件来编辑值-如果您希望ngModel实际更改原始实例，则可以使用显式引用：

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

Angular 8 ngFor的键值管道和ngModels。具有约束力的问题

2 个答案: