时间戳

首页 > 解决方案 > 使用 ngFor 时在迭代中同时设置类和数据

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 次点击，这会导致进程出现一些延迟。

所以请提出一个优化这个要求的好方法

标签： angulartypescript

解决方案

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

解决方案：（选择 Milestone things 作为示例）

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

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

推荐阅读