angular – ng2：如何在ngFor循环中创建变量

实际上,当您在HTML元素上定义一个局部变量时,它对应于组件(如果有的话).当元素上没有组件时,该变量指的是元素本身.

指定局部变量的值允许您选择与当前元素相关联的特定指令.例如：

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

将设置与name变量中当前相关联的ngForm指令的实例.

因此,局部变量不针对您想要的内容,即设置为循环当前元素创建的值.

如果你尝试做这样的事情：

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

您将出现以下错误：

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2实际上寻找一个与提供的名称elt.title匹配的指令)…看到这个plunkr来重现错误：https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

有关详细信息,请参阅此链接：http://victorsavkin.com/post/119943127151/angular-2-template-syntax,“局部变量”一节.

除了迭代的当前元素之外,ngFor只提供一组导出值,可以将其替换为局部变量：index,last,even和odd.

请参阅此链接：https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

你可以做的是创建一个子组件来显示循环中的元素.它将接受当前元素作为参数,并将“局部变量”创建为组件的属性.然后,您将能够在组件的模板中使用此属性,因此它将在循环中的每个元素创建一次.以下是一个示例：

@Component({
  selector: 'elt',template: `
    <div>{{attr}}</div>
  `
})
export class ElementComponent {
  @Input() element;

  constructor() {
    // Your old "localVariable"
    this.attr = createAttribute(element.title);
  }

  createAttribute(_title:string) {
    // Do some processing
    return somethingFromTitle;
  }
}

和使用方式：

<div *ngFor="#elt of eltList" >
  <elt [element]="elt></elt>
</div>