如何在 ngFor 循环中创建变量？

我试图找出如何在ngFor loop.

我有一个这样的循环：

<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"/>

将设置的实例ngForm与当前相关的指令name多变的。

因此，局部变量并不针对您想要的目标，即设置为循环的当前元素创建的值。

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

<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 https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

请参阅此链接：http://victorsavkin.com/post/119943127151/angular-2-template-syntax http://victorsavkin.com/post/119943127151/angular-2-template-syntax，“局部变量”部分了解更多详细信息。

除了迭代的当前元素之外，ngFor只提供一组可以别名为局部变量的导出值：index, last, even and odd.

请参阅此链接：https://angular.io/docs/ts/latest/api/common/NgFor-directive.html 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>