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

Question

I'm using angular6 and I'm trying to loop over the properties of an object, which i load in advance, to show them in text fields. The properties are supposed to be changeable. Therefore i need a two-way-binding.
I tried:

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

with

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

i've also tried

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

with

@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;
  }
}

but the two-way-binding doesn't work.

I get my object from a databse via HttpClient and assign it in ngOnInit()

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

Is there any other possibility to solve my problem?

Answer 1

Thanks to everyone for your help. The problem was that all input fields had the same name.