我正在尝试找出如何在 ngFor loop 中创建变量。
我有一个这样的循环：
<td *ngFor="#prod of products">
<a href="{{getBuild(branch,prod)?.url}}">
{{getBuild(branch,prod)?.status}}
</a>
</td>
您可以看到getBuild 调用必须重复多次。 （在我的实际示例中更多次）。我想要一种方法，在循环内一次在模板中创建这个变量并简单地重用它。
有没有办法做到这一点？
【问题讨论】：
尽管可以就简单地编写一个新的子组件的优点进行争论。我认为以下解决方案是对所提问题的最正确答案。
<div *ngFor="let person of listOfPeople">
<ng-container
*ngTemplateOutlet="introText; context: { title: getTitle(person), color: person.color }"
></ng-container>
</div>
<ng-template #introText let-title="title" let-color="color">
<p [style.color]="color">
{{title}} loves the color {{color}}
</p>
</ng-template>
查看codesandbox of this。
这将允许定义多个模板变量，并无限次重复使用计算的输出。
使用 ng-template 的原因：
避免使用 ng-template 的原因：
【讨论】：
在 *ngIf 解决方案上的改进，您可以始终保持真实条件，不留下任何罪魁祸首
<ng-container *ngFor="let item of items">
<ng-container *ngIf="getMyVariableValue(item.id) || true; let myVariable">
{{ content here }}
</ng-container>
</ng-container>
我要注意的一个观察结果是，当函数“getMyVariableValue”返回 null 或 undefined 时，它并没有像我那样来，而是它的值来了作为真实。我使用的是 Angular 11.2.3 版。
【讨论】：
虽然不理想，但另一种方法可能是使用 *ngIf
<td *ngFor="#prod of products">
<ng-container *ngIf="{build:getBuild(branch,prod)}; let state">
<a href="{{state.build?.url}}">
{{state.build?.status}}
</a>
</ng-container>
</td>
由于 *ngIf 表达式返回一个对象，所以它总是 thruthy，所以 ng-container 中的内容总是会被渲染。结果对象被分配给状态变量，以后可以重用。 ng-container 不插入 dom 元素。
【讨论】：
使用 Angular 4，您可以这样做：
<td *ngFor="#prod of products">
<div *ngIf="getBuild(branch,prod); let build">
<a href="{{build.url}}">
{{build.status}}
</a>
</div>
</td>
【讨论】：
我认为局部变量（使用 # 字符定义）不适用于您的用例。
事实上，当您在 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>
【讨论】：
*ngFor="let myVar of list"。看看：(angular.io/docs/ts/latest/api/common/NgFor-directive.html)
我认为这是制作子组件的经典案例。
<td *ngFor="#prod of products">
<subComp [prod]=prod></subComp>
</td>
然后您的组件将有一个prod 输入并在OnInit 中运行一次所需的函数。
简单的例子 plunk here
【讨论】：
不，只需将每个branch/prod 组合的结果缓存在getBuild 中，或者只要使用与以前相同的值调用它即可。
【讨论】：