Ion-picker dynamic array

Question

I want to get an ion-picker with dynamic options on my app, now is static but, I don't know how to do it, it is just a year picker so, i need an array which has a name and a value in each position. I let my code below:

...
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

I think it should be straight forward:

• declare a variable (property) in your class
• assign initial value or dynamically before calling "create"

also see this ion-picker source code example (not Angular / Ionic but same principle) where a method is used to construct both columns and options:

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

Example:

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