html - Ionic 5 - イオン選択フィールドで複数のオプションを事前選択
ionic-select-option で複数のオプションを事前に選択するにはどうすればよいですか?
NgModel と select は Ionic 5 では機能しなくなったため、以前のすべてのソリューションは機能しなくなります
API から取得したユーザーの好きな食べ物は数多くあります。
ユーザーのお気に入りデータ (userFavFoods)
[
'apple', 'pear'
]
ユーザーの好きな食べ物を表示する必要がある ion-select 要素があります。ユーザーが選択を解除して、ユーザーの更新された好きな食べ物を送信できるように、事前に選択しておく必要があります。これはすべて 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 の事前選択 ion-select-option は、NgModel と Selected の両方がサポートされていないため、Ionic 5 では機能しません。
[compareWith]="compareWith" を使用する解決策もあるようですが、これらは複数のセクション オプションには対応していません。
抜本的な解決策の 1 つは、 をチェックボックスとイオンテキストに置き換えることです。これは、チェックされた値をプログラムで設定できることを意味します。
HTML を調べると、ボタンがクリックされたときに aria-checked=true になっているようですが、それを追加しても何も起こりません。
Ionic 5 で複数の値を持つ ion-select-option の事前選択ができるかどうか、またその方法を知っている人はいますか?
編集 ion-select のドキュメントには、値を事前に選択する例があるようです。
<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>
編集 編集
以下の私の回答を参照してください
------------------------
<ion-select> の値multiple="true" の場合選択の配列ですed 値。したがって、複数の値の 1 つを適切に事前選択するには、<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>
------------------------
.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>
1
[(ngModel)] の場合、「foodList」ではなく「foodSelected」が必要でした。
– オースティン V.2021 年 3 月 24 日 15:12
------------------------
.ts ファイル内の選択された項目には別の配列を使用する必要があります。
foodSelectedItems = ['apple', 'pear'];
foodListItems = ['apple', 'orange', 'guava', 'pear'];
そして、.html ファイル内で、[ngModel]="foodSelectedItems" で 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>
注: 選択した配列には 1 つの項目があり、文字列である必要があります。それ以外の場合は選択されません。
私の場合、次のようなデータを継承しました。
私が持っているデータ
select-input は l のように見えますこれいいね
したがって、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>
これは、私のようにデータを保存している人にとって役立つかもしれません。
2020 年 12 月 24 日 7:48 に回答
ムハマド・ウスマンムハマド・ウスマン
361
4
銀バッジ 4 個
16 個
銅バッジ 16 個
------------------------
[(ngModel)] には選択リストを使用し、[value] には選択した値リストを使用する必要があります。
------------------------
以前の解決策を間違って確認する必要があるようです。[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 内のすべての項目 (別名すべて) が選択されます。