web-dev-qa-db-ja.com

ion-optionのデフォルトの選択値を設定する方法は？

Ionic v2を使用していますが、ページを表示するときに選択した値を設定できません。

<ion-select [(ngModel)]="company.form">
    <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>

私もcheckedで試しましたが、それもうまくいきません。これどうやってするの？

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
htmlangularionic-frameworkionic2
15
Perrier

デフォルト値のxorオブジェクトを扱う場合、最もクリーンな方法は[compareWith]属性に比較関数を提供することです。この関数は、パラメーターで2つのオブジェクトを受け取り、等しい場合にtrueを返します。これにより、モデルの既存の値が開始時に選択されます。これは、選択範囲外のモデルに新しいデータが追加された場合にも機能します。

次の例は、公式Ionic doc

<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;
}
6
Nicolas Janel

問題は、ion-optionがrc3のオブジェクトを好まないということです。オブジェクトのid部分のみを操作し、必要なオブジェクトを見つけて値として設定する個別のchangehandlerを作成する必要があります。

  <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
    <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
  </ion-select>

そして、チェンジハンドラー：

companyFormSelected(newform) {
    let selectedForm = this.forms.find((f)=>{
      return f.id === newform;
    });
    this.company.form=selectedForm;
}

これはrc3のバグのようですが、バグをどこで報告できるかわかりません。 topic on ionic forum を開きました。

12
Perrier
<ion-select [(ngModel)]="name">// binding the value available from ts file
    <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name"  selected="{{(idx==0).toString()}}">{{form.name}}</ion-option>
</ion-select>

tsファイル内

name = this.forms[0].name //assign the variable name to the first index of your array
6
Mohan Gopi

選択した属性を使用する必要はありません。または[選択]属性は不要です。

<ion-select [(ngModel)]="company.form.id" name="company.form.id">
    <ion-option *ngFor="let form of forms" value="{{ form.id }}">
      {{ form.name }}
    </ion-option>
</ion-select>
4
0077cc

これは私のために働いています。

Htmlで：

<ion-select [(ngModel)]="company.form">
    <ion-option value="frm1"> Form 1 </ion-option>
    <ion-option value="frm2"> Form 2 </ion-option>
</ion-select>

Tsで：

company = {
   form:null
}; 

constructor(){
   this.company.form = "frm1";
}
2
Khurshid Ansari

イオンオプション内では、次のことができます

<ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option>
1
A. Radulescu
  in html---->

     <ion-item text-center >
        <ion-select  [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" >
          <ion-option *ngFor="let q of questionArray let i=index"  selected="{{(i==defaultSelectQuestion).toString()}}"  >
             {{q}}
            </ion-option>
        </ion-select>
      </ion-item>


in ts---->
//if u dont want any default selection
    this.defaultSelectQuestion = -1; 

//if first element should be your default selection
  this.defaultSelectQuestion = 0;



this.selectedQuestion=this.questionArray[this.defaultSelectQuestion]
1
Fir

ion Selectタグ配列をngModelに割り当てるだけで、デフォルト値が選択されます。シンプル

0
shridhar lingaraddi
<ion-select ([ngModel])="dropdown1">
  <ion-select-option value="1">Item1</ion-select-option>
  <ion-select-option value="2">Item2</ion-select-option>
</ion-select>

以下は機能しません。

const a = 2; dropdown1 = a;

ただし、次のように機能します。

const a = 2; dropdown1 = a + "";

選択オプションの値は文字列として扱われるため、比較が失敗しないようにモデル変数に文字列値を割り当てる必要があります。

0
user628176