ngModel 在对象键上通过 ngFor 对象属性的双向数据绑定

Question

我正在使用 angular6，我正在尝试遍历我预先加载的对象的属性，以在文本字段中显示它们。属性应该是可变的。因此我需要双向绑定。
我试过了：

<mat-form-field *ngFor="let key of object | keys">
  <input matInput placeholder="{{key}}" name="attribute" [(ngModel)]="object[key]">
</mat-form-field>

和

@Pipe({
  name: 'keys'
})
export class ObjectKeysPipe implements PipeTransform {
  transform(value: object, args: string[]): any {
    return Object.keys(value);
  }
}

我也试过了

<mat-form-field *ngFor="let property of object | keysValue">
  <input matInput placeholder="{{property.key}}" [(ngModel)]="property.value">
</mat-form-field>

和

@Pipe({
  name: 'keyValue'
})
export class ObjectKeyValuePipe implements PipeTransform {
  transform(value: object, args: string[]): any {
    const arr = [];
    const keys = Object.keys(value);
    const values = Object.values(value);
    for (let i = 0; i < keys.length; i++) {
      arr.push({'key': keys[i], 'value': values[i]});
    }
    return arr;
  }
}

但是双向绑定不起作用。

我通过 HttpClient 从数据库中获取我的对象并在 ngOnInit() 中分配它

ngOnInit() {
this.apiService.getObject(objectId).subscribe(
  res => {
    if (res.status === 200) {
      this.object = res.body;
    }
  }
);}

还有其他方法可以解决我的问题吗？

Answer 1

感谢大家的帮助。问题是所有输入字段都具有相同的名称。

ngModel 在对象键上通过 ngFor 对象属性的双向数据绑定

ngModel two-way-data-binding of object properties in ngFor over object keys

object

ngfor

ngmodel

angular

two-way-binding