ngModel двухстороннее связывание данных свойств объекта в ngFor над ключами объекта - PullRequest
Новая
       33

ngModel двухстороннее связывание данных свойств объекта в ngFor над ключами объекта

0 голосов
/ 24 сентября 2018

Я использую 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;
    }
  }
);}

Есть ли другая возможность решить мою проблему?

1 Ответ

0 голосов
/ 27 сентября 2018

Спасибо всем за помощь.Проблема заключалась в том, что все поля ввода имели одинаковое имя.

...