<td *ngFor="#prod of products"> <a href="{{getBuild(branch,prod)?.url}}"> {{getBuild(branch,prod)?.status}} </a> </td>
您可以看到“getBuild”调用必须重复多次. (在实际的例子中有更多的次数).我想要一种在循环中创建这个变量的方法,只需重新使用它.有没有办法做到这一点?
实际上,当您在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>
原文地址:https://www.jb51.cc/angularjs/142587.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。