时间戳

首页 > 解决方案 > 离子选择器动态阵列

angular - 离子选择器动态阵列

问题描述

我想在我的应用程序上获得一个带有动态选项的离子选择器，现在是静态的，但是我不知道该怎么做，它只是一个年份选择器，所以我需要一个具有名称和值的数组每个位置。我让我的代码如下：

...
import { PickerOptions } from '@ionic/core';
import { PickerController } from '@ionic/angular';

@Component({
  selector: 'app-order-filter',
  templateUrl: './order-filter.page.html',
  styleUrls: ['./order-filter.page.scss'],
})

export class OrderFilterPage implements OnInit {
  framework = '';

  constructor(private pickerCtrl: PickerController) {}

  ...
  async showBasicPicker(){
    let opts: PickerOptions = {
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Done'
        }
      ],
      columns: [
        {
          name: 'Year',
          options: [
            { text: '2017', value: '2017'},
            { text: '2018', value: '2018'},
            { text: '2019', value: '2019'}
          ]
        }
      ]
    };
    let picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      let col = await picker.getColumn('framework');
      console.log('col: ', col);
      this.framework = col.options[col.selectedIndex].text;
    });
  }
}

标签： angularionic-frameworkionic4angular8

解决方案

我认为应该直截了当：

  • 在你的类中声明一个变量（属性）
  • 在调用“create”之前分配初始值或动态

另请参阅此离子选择器源代码示例（不是 Angular / Ionic，但原理相同），其中使用方法来构造列和选项：

https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/picker/index.html

例子：

import { PickerOptions } from '@ionic/core';
import { PickerController } from '@ionic/angular';

@Component({
  selector: 'app-order-filter',
  templateUrl: './order-filter.page.html',
  styleUrls: ['./order-filter.page.scss'],
})

export class OrderFilterPage implements OnInit {

  pickerColumnOptions; // add this variable, assign initial value before creating picker

  framework = '';

  constructor(private pickerCtrl: PickerController) {

    // assign initial value here in constructor or inside ngOnInit hook:
    this.pickerColumnOptions = [
            { text: '2017', value: '2017'},
            { text: '2018', value: '2018'},
            { text: '2019', value: '2019'}
          ]

}

  ...
  async showBasicPicker(){
    let opts: PickerOptions = {
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Done'
        }
      ],
      columns: [
        {
          name: 'Year',
          options: this.pickerColumnOptions
        }
      ]
    };
    let picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      let col = await picker.getColumn('framework');
      console.log('col: ', col);
      this.framework = col.options[col.selectedIndex].text;
    });
  }
}

推荐阅读