是否可以使用 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

如果您将条件设置为选中属性会怎样！喜欢

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

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

Answer 2

如果 serVivo.title 在 availables 数组中，则以下内容应通过 seresVivos 数组，显示 serVivo 的标题和显示切换。

<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-file 中处理数组，并向每个 seresVivo 添加类似 seresVivo.available 布尔字段的内容。

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

Is it possible to use ngIf to match two arrays and show correctly the parameters that don't match?

angular

ionic-framework

ngfor

angular-ng-if

ng-template