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

Question

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

第一个列表显示那一年 的当前成员，第二个列表显示人们在那一年被开除。

我注意到我有两个相同的 for 循环，除了一个打印出所有真 bool 值，一个打印出假值。有没有更好的方法(或某种方法)打印出被原谅和没有被原谅的人？

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

Answer 1

不用额外的*ngIf就这样使用会更好

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

在您的组件中，您可以定义过滤函数:

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>

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