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

【问题标题】：Ionic 5 - Pre select multiple options in ion-select fieldIonic 5 - 在离子选择字段中预选多个选项
【发布时间】：2020-09-03 03:19:53
【问题描述】：

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

NgModel 和 select 在 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>

编辑编辑

请看下面我的回答

【问题讨论】：

标签： html angular ionic-framework angular9 ionic5

【解决方案1】：

在 .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)]，我需要“foodSelected”，而不是“foodList”。

【解决方案2】：

<ion-select> 的值当multiple="true" 是选定值的数组时。因此，为了正确预选多个值之一，您可以使用[formcontrol] 设置<ion-select> 的值。

在组件中：

ionSelect: FormControl = new FormControl([]);

ionViewWillEnter() {
     this.ionSelect.setValue(['apple', 'banana']);
}

HTML：

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

【讨论】：

【解决方案3】：

您应该使用您的选择列表到 [(ngModel)] 和选择的值列表到 [value]

【讨论】：

【解决方案4】：

您应该为 .ts 文件中的选定项目使用单独的数组：

foodSelectedItems = ['apple', 'pear'];
foodListItems = ['apple', 'orange', 'guava', 'pear'];

在 .html 文件中，您可以像这样在 [ngModel]="foodSelectedItems" 或 [value]="foodSelectedItems" 中绑定 foodSelectedItems：

<ion-select multiple="true" [ngModel]="foodSelectedItems" >
   <div *ngFor="let food of foodListItems">
       <ion-select-option value="food">{{food}}</ion-select-option>
   </div>
</ion-select>

或

<ion-select multiple="true" [value]="foodSelectedItems">
   <div *ngFor="let food of foodListItems">
       <ion-select-option value="food">{{food}}</ion-select-option>
   </div>
</ion-select>

注意：您选择的数组只有一个项目，并且必须是字符串。否则不会被选中。

就我而言，我继承了这样的数据：

Data that I have

select-input looks like this

所以我在html中管理它：

<ion-item *ngFor="let expertise of myExpertiseData; let i=index">
      <ion-label>{{expertise.title}}</ion-label>
      <ion-select multiple="true" (ionChange)="onChange($event, i)" [value]="expertise.selectedId">
       
        <ion-select-option value="{{item.Id}}" *ngFor="let item of expertise.data" >{{item.Name}}</ion-select-option>

      </ion-select>
    </ion-item>

也许这有助于像我一样存储数据的人。

【讨论】：

【解决方案5】：

看来我必须检查以前的解决方案错误，[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>

Above 将选择数组 userFavFoods 中的所有项目，也就是所有项目。

【讨论】：