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

Question

我有一个 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）在启动 inputConfigs 时在 bindingField: this.objectToBind.prop1 中按值进行了复制。结果是输入组件实际上并没有绑定到 objectToBind.prop1，而是绑定到它的一个没有任何引用的文字副本。

有没有办法解决这个问题，我想在 ngFor 下使用 ngModel 绑定到不同的属性？还是我别无选择，只能放弃 ngFor 并在模板中静态写入所有内容？任何帮助将不胜感激！

顺便说一句，有一些答案指出在 ngModel 表达式中使用索引，例如在 ngFor 中添加 let index = index; 并使用 [(ngModel)]="inputConfigs[index].bindingField"。但这似乎没有帮助。

Answer 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>

Answer 2

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

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

Set ngModel binding property within ngFor with different name for each property

angular

typescript

angular-ngmodel

angular-ngfor

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

Set ngModel binding property within ngFor with different name for each property

angular

typescript

angular-ngmodel

angular-ngfor

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