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

Posted 2023-03-13

【中文标题】如何根据数据对象中的特定键设置检查离子选择选项？

【英文标题】：How to set ion-select-option checked based on specific key in data object?

【发布时间】：2020-02-14 04:53:56

【问题描述】：

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

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

谢谢

【问题讨论】：

comparewith 用于比较对象。我相信这不是你想要的吗？

我想“检查”所有 IsSelected == true 的 ion-select-option 项。我不知道如何实现，是否应该使用 compareWith

【参考方案1】：

根据键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;
  ;

【参考方案2】：

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

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

你可以用isSelected代替id

【讨论】：

不幸的是无法正常工作。作为旁注：返回 e1 && e2 ？ e1.id === e2.id : e1 === e2;选择第一项

好的。那么您可以尝试ngIf 并在其中选择一个查询。 ngIf 将检查 isSelected 是否为真。另外我认为您的选择需要多个为真，例如 multiple=true