angular - 在使用 ngFor 进行迭代时同时设置类和数据

我有一个表格，每一行都是使用 ngFor 创建的

 <tbody>
    <tr *ngFor="let item of Details">
        <div class="row details-row row-cols-lg-2 row-cols-1" *ngIf="closureDetails">
            <div class="col" [ngClass]="{'d-none':getMilestones(item.ProjectCode)?.length===0}">
                <app-milestone [milestones]="getMilestones(item.ProjectCode)"></app-milestone>
            </div>
            <div class="col" [ngClass]="{'d-none':getRisks(item.ProjectCode)?.length===0}">
                <app-risk [risks]="getRisks(item.ProjectCode)"></app-risk>
            </div>
        </div>
    </tr>
</tbody>

如你所见，我正在使用相同的函数为 col 设置类，以便将数据传递给子组件。但我担心的是，该函数会触发两次，而第一次触发只是为了切换 DIV.COL 的可见性。

当有300多行数据时，同一个函数会消耗600次请求，这导致处理过程中出现一些延迟。

所以请建议一种优化这个需求的好方法

答案＃1

就像 @ricky 说的，你永远不应该在模板表达式中使用函数调用

解决方案：（选择里程碑事件作为示例）

在组件中引入变量，并在模板中使用它来替换函数绑定：

`hasMileStones` for `getMilestones(item.ProjectCode)?.length===0}`

`projectCodeToMileStonesMap[item.ProjectCode]` for `getMilestones(item.ProjectCode)`

模板：

<div class="col" [ngClass]="{'d-none':!hasMileStones}">
    <app-milestone [milestones]="projectCodeToMileStonesMap[item.ProjectCode]"></app-milestone>
</div>