在使用ngFor时，在迭代中同时设置class和data

Question

我有一个表，其中每一行都是使用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设置类S使用相同的函数将数据传递给子组件。但我担心的是该函数触发两次，第一次只是为了切换

DIV的可见性。当有300多行时，同样的函数需要600次点击，这会导致进程延迟。

所以请建议一个好的方法来优化这个要求

Answer 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>