angular - 如何在 Angular 2 的 ngFor 中设置绑定(bind)？

Question

注意:我发现了几个类似的问题，但没有一个真正回答了我的(通用)问题

我有这个

component.ts

first: string;
second: string;
third: string;
fields = ["first", "second", "third"];

我希望能够在 component.html 中生成一个复杂的组件(无需导入自定义指令)，其中包括:

• 必需:基于字段[i]的ngModel绑定(bind)

  (例如 i = 0，fields[i] = "first"，ngModel = first)

• 可取:使用 fields[i] 作为字符串分配给任何 DOM 元素属性(例如

循环看起来像这样:

 <div *ngFor="let field of fields">
      <label for="???>
      [(ngModel)]="???"
 </div>

至于第二点，它与 id 一起工作，作为 div 的内容。

然而...

• 在 ngModel 的情况下:[(ngModel)] = "field"导致异常(无法分配给引用或变量!)

• 在将字符串赋值给(例如)的情况下

   <label for="{{field}}">,
  

  我也遇到异常(无法绑定(bind)到 'for'，因为它不是已知的 native 属性 ("i">)

Answer 1

>=RC.6

 <label for="{{field}}">
 <label [for]="field">

<=RC.5

 <label attr.for="{{field}}">
 <label [attr.for]="field">
 <label [htmlFor]="field">

更新

<div *ngFor="let field of fields; let i=index; trackBy:trackByIndex">
  <label htmlFor="field">
  <input [(ngModel)]="fields[i]">
</div>

并将其添加到组件中

trackByIndex(index: number, obj: any): any {
  return index;
}