减少 ngFor 循环内的相同函数调用

Question

在 ngFor 循环内部，有 3 个相同的函数调用 - processStatus(status)。有没有办法通过将其保存在参数中，在 for 循环中仅调用一次，然后在 ngFor 中引用该参数？

<ng-container *ngFor="let status of processCompStatusOrder; let i = index;>
     <div *ngIf="!!processStatus(status)">
         <clr-icon class="icon" [attr.shape]="svc.getIcon(processStatus(status))"></clr-icon>
         {{ 'base.' + processStatus(status)?.toLowerCase() | i18next }}
     </div>
</ng-container>

processStatus(status) {
     return this.process?.[status]?.process?.status; 
 }

我的以下尝试不起作用

<ng-container *ngFor="let status of processCompStatusOrder; let i = index; let p=processStatus(status)>
     <div *ngIf="!!p">
         <clr-icon class="icon" [attr.shape]="svc.getIcon(p)"></clr-icon>
         {{ 'base.' + p?.toLowerCase() | i18next }}
     </div>
</ng-container>

Answer 1

你可以获得结果和 alisa 喜欢的 结果

*ngIf='{status:processStatus(status)}

现在您可以访问该 ngif 中的 result.status

`<ng-container *ngIf='{status: processStatus(status)} as result'>
 <div *ngIf="!!result.status">
     // any where else you can access this property
 </div>
</ng-container>`

使用自定义管道来实现进程状态函数的功能也是一个更好的做法。 在模板中使用函数几乎会在每次更改检测时触发它，并可能导致性能问题。 角管