时间戳

首页 > 解决方案 > 在 Angular 6 的两个地方使用非常相似的 for 循环是不好的做法吗？

angular - 在 Angular 6 的两个地方使用非常相似的 for 循环是不好的做法吗？

问题描述

我正在为 a 生成两个列表roster。

一个列表显示当前成员that year，第二个列表（如果有人去过excused in that year）。

我注意到我有两个相同的 for 循环，除了一个打印出所有真正的布尔值，一个打印出错误。有没有更好的方法（或某种方法）来打印出这些人excused and not excused？

<h2>Roster {{year-1}}-{{year}}</h2>

<div *ngFor="let k of peoples">
  <div *ngFor="let a of k.people; let j = index">
    <div *ngIf="k.year == year && k.people[j].excused == false">
      {{k.people[j].firstName}} {{k.people[j].lastName}}
    </div>
  </div>
</div>

<h2>Excused</h2>

<div *ngFor="let k of peoples">
  <div *ngFor="let a of k.people; let j = index">
    <div *ngIf="k.year == year && k.people[j].excused == true">
      {{k.people[j].firstName}} {{k.people[j].lastName}}
    </div>
  </div>
</div>

标签： angulartypescript

解决方案

最好以这种方式使用它而无需额外的 *ngIf。

正如评论中提到的，最好准备为组件中的数据分离数组并在数据更新后执行一次。但由于使用上下文未知，这看起来是一个更好的解决方案。如果您可以过滤数组中的数据以防止不必要的工作，则需要避免 *ngIf 模板中的另一个结构指令。它总是给你性能优势。

在您的组件中，您可以定义filter function：

getExcused(isExcused: boolean) {
    return this.peoples
        .filter(k=>k.year === this.year)
        .map(k=>k.people)
        .filter(p=>p.excused === isExcused);
}

然后在模板中：

<h2>Roster {{year-1}}-{{year}}</h2>
<div *ngFor="let a of getExcused(false)">
    {{ a.firstName }} {{ a.lastName }}
</div>
<h2>Excused</h2>
<div *ngFor="let k of getExcused(true)">
    {{ k.firstName }} {{ k.lastName }}
</div>

如果您的组件在推送时使用更改检测策略，则不会产生任何性能问题。

推荐阅读