web-dev-qa-db-ja.com

Ionic 2？の動的オプションを使用したイオン選択

Ionic 2.でアプリケーションを開発しています。動的な方法でイオン選択オプションを追加する必要がありますが、おそらく非常に単純なものに困惑しています。これが私のコードスニペットです。

<ion-select [(ngModel)]="classifications" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>

this.classifications = this.local.get('classifications')._result;
    console.log('classifications: '+ this.local.get('classifications')._result);


updateSelectedValue(event:string):void {
   this.selectedObject = JSON.parse(event);
   console.log('selectedObject: '+this.selectedObject);
}

コンソールログの出力：

classifications: ["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]

私も例外が発生しています。

EXCEPTION: Cannot find a differ supporting object '["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]' in [classifications in JobsearchPage@30:17]

編集：

そして、オプションを選択するためにその値を設定していません。私はこれをAngular 1で行いました。

<select id="classificationId"  data-role="listview" data-inset="true" ng-options="classification as classification for classification in classifications " ng-model="classification" x-ng-change="update(classification)">
<option value=''>Classifications</option></select><select id="classificationId" data-role="listview" data-inset="true" ng-options="classification as classification for classification in classifications " ng-model="classification" x-ng-change="update(classification)"><option value=''>Classifications</option></select>

編集（コメントから回答へ）

export class JobsearchPage { 
    selectedClassification:string; 
    constructor(http: Http, 
        nav: NavController, 
        messagesService:MessagesService, navParams:NavParams) { 
      this.http = http;
      this.messagesService = messagesService; 
      this.nav = nav; 
      this.classifications = new Array("t9it", 'uitut');
      console.log('STP selected'+selectedClassification); 
  } 
}
angularionic2ionic2-select
6
happycoder

Ionicは使用しませんが、ngModelは、可能なオプションのリスト全体ではなく、選択したオプションを保持する（または割り当てられる）フィールドを指す必要があると確信しています。

<ion-select [(ngModel)]="selectedClassification" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>

class MyComponent {
  selectedClassification:string;
}
2
Günter Zöchbauer

（ionChange）= 'func（$ event）'およびfunc（event）{console.log（event）;}を試すことができます

1
Praful vats

@Gunterが私にionicに慣れていないと言ったのと同じですが、オブジェクト全体ではなく、常に割り当てられた単一のフィールドを指すngModelの問題である可能性があります。/Array/whatever。

私の理解では、動的に作成された選択されたオプションを取得したいので、[(ngModel)]をこのような単一の文字列に設定した2つのメソッドがあります。

<ion-select [(ngModel)]="selectedvalue" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" [value]="key" [checked]="true">{{key}}</ion-option>

または2番目の方法は、このような選択オプションに変更イベントを適用することです。

<ion-select #newSelect (change)="selectedvalue = newSelect.value">
 <ion-option *ngFor="#key of classifications" [value]="key" [checked]="true">{{key}}</ion-option>

これが私の場合ですselectedvalueは、選択したオプションのキーの値です。

0
Pardeep Jain

クラス：today-input.ts

エクスポートクラスTodayInputPage {

public _projectName: string;
public projectDetails: any;

}

HTML：today-input.html

     <ion-item no-lines>
      <ion-label>Project Name</ion-label>
      <ion-select type="text" [(ngModel)]="_projectName">
        <ion-option *ngFor="let p of projectDetails" value="{{p.projectName}}">
          {{p.projectName}}
        </ion-option>
      </ion-select>
    </ion-item>

projectDetails値はサービスから取得されます。

projectDetailsオブジェクト

{日付： "2017年3月4日"、期間： "07:30"、プロジェクト名： "XYZ"}、.。

_ projectNameクラス内で選択された値を保持します。

0
Vamsi konanki

以下は私のために働いた：

_<ion-item>
    <ion-label>Select Name</ion-label>
    <ion-select type="text">
        <ion-option *ngFor="#userInfo of userInfos"  value="{{userInfo.id}}">{{userInfo.name}}</ion-option> 
    </ion-select>
</ion-item>
_

何らかの理由で。理由はわかりませんが、[(ngModel)]を指定しなくても機能します

0
LeRoy