是否可以使用 ngIf 来匹配两个数组并正确显示不匹配的参数？

Question

我有一个项目需要过滤以显示它是否可用。我正在使用切换，因为它必须是动态的。问题是我有一个函数调用，它向我发送了一个标题数组，这些标题可以通过切换显示出来。

<ion-item *ngFor="let serVivo of seresVivos" id="items">
<div *ngFor="let available of availables">  
  <ng-template *ngIf="available === serVivo.title;then showBlock; else notShowBlock">
  </ng-template>
  <ng-template #showBlock>
    <ion-toggle  (ionChange)="change(serVivo.title, $event)" checked ></ion-toggle>
  </ng-template>
  <ng-template #notShowBlock>
    <ion-toggle  (ionChange)="change(serVivo.title, $event)"  ></ion-toggle>
  </ng-template>
</div>    
</ion-item>

因为它只能匹配一次，所以当标题匹配数组的一项时，它会正确显示切换。然而，由于不匹配的都是其余的，所以它创建了与数组可用的相同的项目。 Result with the actual code.The result only creating the true toggles

Answer 1

以下内容应通过 seresVivos 数组，显示 serVivo 的标题，如果 serVivo.title 在可用数组中，则显示切换为选中状态。

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

但我认为，为了避免模板中的包含逻辑，更好的解决方案是处理 ts 文件中的数组，并向每个 seresVivo 添加类似 seresVivo.available 布尔字段的内容。

Answer 2

如果您对已检查的属性设置条件会怎样！喜欢

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

我认为这必须有效！试试这个！ 如果没有，请告诉我！