如何使用ngIf匹配两个数组并正确展示不匹配的参数项

问题原因 #

你当前代码的问题出在嵌套了两层*ngFor循环，每个serVivo条目都会遍历整个availables数组生成对应数量的toggle，自然会出现重复条目。

修复方案 #

直接去掉内层的availables循环，用数组includes方法直接判断当前条目标题是否在可用列表里即可，不需要遍历整个可用数组匹配，修改后代码如下：

<ion-item *ngFor="let serVivo of seresVivos" id="items">
  <ion-toggle 
    (ionChange)="change(serVivo.title, $event)" 
    [checked]="availables.includes(serVivo.title)"
  >
  </ion-toggle>
</ion-item>

如果availables数组长度很大，可以提前把它转成Set对象提升查找性能：

1. 先在ts文件中处理可用列表：availableSet = new Set(this.availables)
2. 模板中修改checked判断：[checked]="availableSet.has(serVivo.title)"

内容的提问来源于stack exchange，提问作者Sam