【ionic】プルダウンリストを実装する

3761 ワード
Angular2 TypeScript ionic2 Firebase TypeScript テキストリンク

子育ての傍ら、ionic2で家計簿アプリを作ってます。
https://qiita.com/irohamaru/items/3df901cd7e12e3c85e9a

その中で、ionic2でプルダウンを実装したいと思ったのですが、ちょっと手間取ったのでメモしておきます。

データはFirebaseに保持されているテーブルから取得するものとします。
（テーブル：koumokuに登録された各データを取得してリスト表示する）

sample.ts
export class samplePage {
  koumokuList: FirebaseListObservable<any>;

  constructor(public navCtrl: NavController, afdb: AngularFireDatabase) {

    this.koumokuList = afdb.list('koumokuList', {
      query: {
        orderByChild: 'name'
      }
    });
  }
sample.html
<ion-item>
  <ion-select [(ngModel)]="koumokuList.name" cancelText="Cancel" okText="OK">
    <ion-option *ngFor="let koumoku of koumokuList | async" [value]="koumoku.name">{{koumoku.name}}</ion-option>
  </ion-select>
</ion-item>

結果、こんな感じでプルダウン表示されます。

プルダウン表示された項目を複数選択できるようにするには、ion-selectタグにmultiple="true"をつければ良いようです。

<ion-select multiple="true" [(ngModel)]="test"> 
...
</ion-select>

項目を選択して、それを登録処理に渡す方法など、何か分かったら追記します。

参考URL
https://stackoverflow.com/questions/45558343/ionic-2-angular-2-get-values-from-ion-select-in-form-to-send-http-post