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对象属性中的ngModel双向数据绑定

1 个答案: