Ionic 5 - 在離子選擇字段中預選多個選項

Question

如何在 ionic-select-option 中預選多個選項？

NgModel 和 select 不再適用於 Ionic 5，因此所有以前的解決方案不再適用

我從 api 中獲得了一系列用戶最喜歡的食物，

用戶的 FavFood 數據 (userFavFoods)

[
  'apple', 'pear'
]

我有一個離子選擇元素，需要顯示用戶最喜歡的食物，應該預先選擇它，以便他們可以取消選擇它並發送用戶更新的最喜歡的食物。 這一切都在一個 NgForm 中。

最喜歡的食物 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-select-option ？

編輯似乎離子選擇文檔有一個預選值的例子

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

編輯 編輯

看我下面的回答

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

Answer 2

當multiple="true"是選定值的數組時， <ion-select>的值。 因此，為了正確地預選多個值之一，您可以使用[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>

Answer 3

您應該將選擇列表用於 [(ngModel)] 並將選定的值列表用於 [value]

Answer 4

您應該對 .ts 文件中的選定項目使用單獨的數組：

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

在 .html 文件中，您可以foodSelectedItems在[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>

注意：您選擇的數組只有一個項目並且必須是一個字符串。 否則它不會被選中。

就我而言，我繼承了這樣的數據：

我擁有的數據

選擇輸入看起來像這樣

所以我在 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>

也許這有助於那些像我一樣存儲數據的人。

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

以上將選擇數組 userFavFoods 中的所有項目，也就是一切。