如何根据数据对象中的特定键设置离子选择选项检查?

Question

我正在使用Ionic v4。如何根据对象中的键IsSelected==true检查离子选择选项users？

users = [{text:"Piet",IsSelected:false},{text:"Koos",IsSelected:true}];

<ion-select [(ngModel)]="users" [compareWith]="compareWith">
<ion-select-option *ngFor="let usr of users">{{usr.text}}
</ion-select-option>
</ion-select>

可以用compareWith做到这一点吗？

compareWith = (user1, o2) => {
//How do I check IsSelected here?
return o1.IsSelected;
};

谢谢

Answer 1

您可以尝试以下解决方案：

<ion-item>
<ion-label>Employee</ion-label>
<ion-select [(ngModel)]="employee" [compareWith]="compareFn">
<ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
</ion-select>
</ion-item>
compareFn(e1: Employee, e2: Employee): boolean {
return e1 && e2 ? e1.id === e2.id : e1 === e2;
}

您可以使用 ID 代替isSelected

Answer 2

根据键IsSelected==true选择/检查数据数组中的离子选择选项项

数组

users = [{text:"Piet",IsSelected:false},{text:"Koos",IsSelected:true}];

.HTML

<ion-item>
<ion-select [(ngModel)]="users" [compareWith]="compareWith" >
<ion-select-option *ngFor="let usr of users" [value]="usr" >{{usr.text}}</ion-select-option>
</ion-select>
</ion-item>

[value]="usr"是compareWith功能所必需的

compareWith = (o1, o2) => {
return o1 && o2 ? o1.text === o2.text && o1.IsSelected  : o1 === o2;
};