ngFor中对象属性的ngModel双向数据绑定对象键答案

【问题标题】：ngModel two-way-data-binding of object properties in ngFor over object keysngFor中对象属性的ngModel双向数据绑定对象键
【发布时间】：2019-02-28 03:20:31
【问题描述】：

我正在使用 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;
    }
  }
);}

还有其他可能解决我的问题吗？

【问题讨论】：

我做了一个stackblitz，似乎第一个解决方案有效。物体长什么样？问题是一个方向还是两个方向？ stackblitz.com/edit/angular-xglnqp
对象因情况而异。它可能是 { ci: null cpu_anzahl: 1 cpu_typ: "Intel(R) Core(TM) i5-5300U CPU @ 2.30GHz" } 我可以编辑这些值，但是当我初始化站点时它们不会显示。
所以你以某种方式从 http 服务器获取它？我认为错误在于你如何分配结果，你需要记住它是异步调用
是的，我从数据库中得到它。我发布了上面的代码。该服务只是一个简单的 get 调用。我的输入组件不应该在我分配结果后立即检查是否有变化吗？
确实如此。this.ci 在您的模板中是指object 吗？我认为 ngFor 只会在开始时运行，所以你可能需要在它周围使用<ng-container *ngIf="object">

标签： angular object ngfor two-way-binding ngmodel

【解决方案1】：

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

【讨论】：