我认为局部变量(用#
个字符定义)不适用于您的用例.
事实上,当您在HTML元素上定义局部变量时,它对应于组件(如果有的话).当元素上没有组件时,变量指的是元素本身.
通过为局部变量指定值,可以 Select 与当前元素关联的特定指令.例如:
<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>
将在name
变量中设置与Current关联的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>