我正在开发一个Web应用程序,我有一个NgFor循环,我希望能够为NgFor创建的每个子元素分配一个局部变量.
即：
<div *ngFor="#elt of eltList" >
<span #setLocalVariable(elt.title)></span>
</div>
setLocalVariable(_title : string){
let var = do some stuff to _title;
return var;
}
上面的例子显示了我想要完成的事情,显然不起作用.
有没有办法实现这个目标？
先感谢您.
编辑：
看到我得到的答案后(我感谢所有花时间阅读我的问题并尝试回答的人)我会再解释一下为什么我会这样想.
我将使用：DynamicComponentLoader中的loadIntoLocation().
该函数作为第3个参数得到一个引用锚点的字符串(即：html元素中的#test).这就是为什么我需要创建名称等于我的elt.title名称的局部变量.
解决方法
实际上,当您在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,“本地变量”部分.
除了迭代的当前元素之外,ngForm仅提供一组导出值,这些值可以别名为局部变量：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>
编辑
在你的评论之后,我认为你尝试了这个答案中描述的方法.以下是更多细节：create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2.
希望它能帮到你,蒂埃里
