离子选择器动态阵列

Question

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

...
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;
    });
  }
}

Answer 1

我觉得应该直截了当：

在您的 class
调用前赋初值或动态赋值"create"

另请参阅此 ion-picker 源代码示例（不是 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;
    });
  }
}

离子选择器动态阵列

Ion-picker dynamic array

ionic-framework

angular

ionic4

angular8