在ngFor内为每个属性设置不同名称的ngModel绑定属性

时间:2018-12-18 08:08:29

标签: angular typescript angular-ngmodel angular-ngfor

我有一个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
  ];
}

此问题似乎是在启动inputConfigs时,Typescript(或更确切地说是JS)在bindingField: this.objectToBind.prop1中按值进行了复制。结果是输入组件实际上并没有绑定到objectToBind.prop1,而是绑定到了没有引用的文本副本。

是否有解决此问题的方法,我想在ngModel下使用ngFor绑定到不同的属性?或者,我别无选择,只能放弃ngFor并将所有内容静态地写入模板中?任何帮助将不胜感激!

顺便说一句,有一些答案指向在ngModel表达式中使用索引,例如在let index = index;中添加ngFor并使用[(ngModel)]="inputConfigs[index].bindingField"。但这似乎无济于事。

2 个答案:

答案 0 :(得分:1)

它绑定到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>

答案 1 :(得分:1)

只要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
  ];

模板

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

,每个对象的值将绑定到inputConfig.value