Установите свойство привязки ngModel в ngFor с другим именем для каждого свойства - PullRequest
Новая
       21

Установите свойство привязки ngModel в ngFor с другим именем для каждого свойства

0 голосов
/ 18 декабря 2018

У меня есть приложение Angular 7, в котором я хотел бы иметь длинный список компонентов ввода HTML, каждый из которых имеет схожие стили, но имеет двустороннюю привязку к другому полю одного объекта в файле Typescript.Я думал, что это может быть достигнуто с помощью массива конфигурации и ngFor, аналогично этому:

app.component.html: 

<div *ngFor="let inputConfig of inputConfigs;">
    <input name="{{inputConfig.id}}" type="number" placeholder="{{inputConfig.description}}"
        [(ngModel)]="inputConfig.bindingField">
</div>

app.component.ts: 

export class AppComponent {

  public objectToBind = {prop1: 5, prop2: 10, prop3: 30};
  public inputConfigs = [
      { id: "prop1", description: "Property 1", bindingField: this.objectToBind.prop1},
      { id: "prop2", description: "Property 2", bindingField: this.objectToBind.prop2},
      { id: "prop3", description: "Property 3", bindingField: this.objectToBind.prop3}
      // additional fields to follow
  ];
}

Проблема с этим заключается в том, что Typescript (или, скорее, JS) сделал копию по значению в bindingField: this.objectToBind.prop1 при инициализации inputConfigs.В результате компонент ввода на самом деле не связан с objectToBind.prop1, а скорее с его буквальной копией, на которую ничего не ссылается.

Есть ли способ обойти эту проблему, где я хочу связать различные свойства сngModel под ngFor?Или у меня нет другого выбора, кроме как отказаться от ngFor и написать все статически в шаблоне?Любая помощь будет принята с благодарностью!

Кстати, были некоторые ответы, которые указывают на использование индекса в выражении ngModel, например, добавление let index = index; в ngFor и использование [(ngModel)]="inputConfigs[index].bindingField".Кажется, это не помогает.

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Просто вы можете сделать это так, пока у inputConfigs есть объекты 

  public inputConfigs = [
      { id: "prop1", description: "Property 1", value: 5},
      { id: "prop2", description: "Property 2", value: 10},
      { id: "prop3", description: "Property 3", value: 20}
      // additional fields to follow
  ];

template 

<div *ngFor="let inputConfig of inputConfigs;">
    <input name="{{inputConfig.id}}" type="number"[(ngModel)]="inputConfig.value">
</div>

и значение будет ограничено inputConfig.value для каждого объекта

0 голосов
/ 18 декабря 2018

Он привязан к inputConfig.bindingField, а не objectToBind.prop1.

, вам необходимо привязать objectToBind[inputConfig.id] к ngModel.

app.component.html: 

<div *ngFor="let inputConfig of inputConfigs;">
    <input name="{{inputConfig.id}}" type="number" placeholder="{{inputConfig.description}}"
        [(ngModel)]="objectToBind[inputConfig.id]">
</div>
...