如何在 Angular 的 ngFor 中创建辅助变量？

Question

我使用 Angular 10 并且我有一个*ngFor指令来迭代元素数组，如下例所示：

<div *ngFor="let foo of foos();">
    <h3>{{foo.a()}}</h3>
    <h3>{{foo.a()}}</h3>
    <h3>{{foo.a()}}</h3>
</div>

如上例所示， foo.a()被多次使用，但此调用需要几毫秒。 有没有什么快速的方法来临时存储值并使用fooA代替？ 我希望像ngFor="let foo of foos(); let fooA = foo.a()"这样的东西会起作用，但没有。 什么是最快的方法？

Answer 1

您可能不应该在 dom 中执行任何这样的函数调用，但是如果您必须这样做，您可能能够逃脱这样的事情：

<div *ngFor="let foo of foos();">
    <ng-container *ngIf="foo.a() as fooA">
        <h3>{{ fooA }}</h3>
        <h3>{{ fooA }}</h3>
        <h3>{{ fooA }}</h3>
    </ng-container>
</div>