离子5-在离子选择字段中预选择多个选项

如何解决离子5-在离子选择字段中预选择多个选项

如何在ionic-select-option中预先选择多个选项？

NgModel并选择在Ionic 5中不再起作用，因此所有以前的解决方案都不再起作用

我从api中获得了一系列用户最喜欢的食物，

用户的FavFood数据（userFavFoods）

[
  'apple','pear'
]

我有一个需要显示用户最喜欢的食物的离子选择元素，应该对其进行预先选择，以便他们可以取消选择它并发送用户最新的最喜欢的食物。全部都在NgForm中。

Fav Foods html

<form #form="ngForm" (ngSubmit)="submitFavFood(form)" novalidate>
    <ion-select multiple="true" cancelText="Cancel" okText="Ok"  required="true" #food="ngModel" name="foods" placeholder="0 Items" ngModel>
      <ion-select-option *ngFor="let foods of userFavFoods"
                                 value="{{ foods }}">
                {{ foods }}
      </ion-select-option>
    </ion-select>
</form>

其他解决方案Ionic 4 pre select ion-select-option不适用于Ionic 5，因为同时不支持NgModel和Selected。

似乎有使用[compareWith] =“ compareWith”的解决方案，这些解决方案不适用于多个节选项。

一种解决方案是用复选框和离子文本替换，这意味着我可以以编程方式设置检查值。

从检查html来看，当单击按钮时似乎aria-checked = true，但是将其添加到没有任何作用。

有人知道在Ionic 5中是否可以或如何预先选择具有多个值的离子选择选项？

编辑 离子选择文档似乎有一个预选择值的示例

  <ion-item>
    <ion-label>Pets</ion-label>
    <ion-select multiple="true" [value]="['bird','dog']">
      <ion-select-option value="bird">Bird</ion-select-option>
      <ion-select-option value="cat">Cat</ion-select-option>
      <ion-select-option value="dog">Dog</ion-select-option>
      <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
    </ion-select>
  </ion-item>

编辑编辑

在下面查看我的答案

解决方法

在.ts文件中，您应该按如下所示声明该选择的默认值。

foodSelected = ['apple','pear'];
foodList = ['apple','orange','guava','pear'];

在HTML文件中添加如下内容。

<ion-select multiple="true" [(ngModel)]="foodList" [value]="foodSelected">
   <div *ngFor="let food of foodList">
       <ion-select-option value="food">{{food}}</ion-select-option>
   </div>
</ion-select>

,

您应将选择列表用于[（ngModel）]，并将选定值列表用于[值]

,

当multiple="true"是所选值的数组时，<ion-select>的值。因此，为了正确地预先选择其他值之一，可以使用[formcontrol]来设置ionSelect: FormControl = new FormControl([]); ionViewWillEnter() { this.ionSelect.setValue(['apple','banana']); } 的值。

在组件中：

<ion-select [formControl]="ionSelect" multiple="true" cancelText="Nah" okText="Okay!">
    <ion-select-option value="apple">Apple</ion-select-option>
    <ion-select-option value="banana">Banana</ion-select-option>
    <ion-select-option value="cherry">Cherry</ion-select-option>
    <ion-select-option value="orange">Orange</ion-select-option>
    <ion-select-option value="strawberry">Strawberry</ion-select-option>
</ion-select>

HTML：

export const Card = React.forwardRef((
  { fluidHeight,className,...props }:
  { fluidHeight?:boolean,className?:string,props?:any },ref?:any) => (
  <div
    {...props}
    ref={ref}
    className={clsx(
      "card card-custom gutter-b",{ "card-height-fluid": fluidHeight },className
    )}
  />
));

,

看来我必须检查先前的解决方案是否错误， [ngModel] 确实适用于Ionic 5

<form #form="ngForm" (ngSubmit)="submitFavFood(form)" novalidate>
    <ion-select multiple="true" [ngModel]="userFavFoods" cancelText="Cancel" okText="Ok"  required="true" #food="ngModel" name="foods" placeholder="0 Items">
      <ion-select-option *ngFor="let foods of userFavFoods"
                                 value="{{ foods }}">
                {{ foods }}
      </ion-select-option>
    </ion-select>
</form>

上面将选择数组userFavFoods中的所有项目，也就是所有内容。