在离子（离子选择器）的服务中从 function 返回 object

Question

In my app, I would like to have a different picker , with two or three columns, so I made 2 different functions to simplify the code. Now I'd like to return my object with my result when the Validate button is pressed. I think I need to deal with Promise , but I am not so familiar with it and I think I am doing something wrong.

Here is my function inside my service:

  async pickerTwoColumns(obj: objectTwoColumns ) {
    this.clearObject(obj.firstColumnOptions);
    this.clearObject(obj.secondColumnOptions);
    let options: PickerOptions = {
      //cssClass: 'picker',
      backdropDismiss: false,
      buttons: [
        // {
        //   text: 'Annuler',
        //   role: 'cancel'
        // },
        {
          text: 'Valider',
          handler: () => {
            return true;
          }
        }
      ],
      columns:[
        {
        name:obj.firstColumnName,
        selectedIndex: obj.firstColumnIndex,
        suffix: obj.firstColumnSuffix,
        options: obj.firstColumnOptions,
        columnWidth: '5',
        suffixWidth: '1',
        prefixWidth: '10',


      },
      {
        name:obj.secondColumnName,
        selectedIndex: obj.secondColumnIndex,
        suffix: obj.secondColumnSuffix,
        options: obj.secondColumnOptions,
        columnWidth: '10',
        suffixWidth: '5',
        prefixWidth: '100',
      },
    ]
    };

    let picker = await this.pickerController.create(options);
    picker.columns[0].options.forEach(element => {
      delete element.selected;
      delete element.duration;
      delete element.transform;
    });

    // https://github.com/ionic-team/ionic-framework/issues/17664
    picker.present();
    picker.onDidDismiss().then(async data => {
      let firstColumn = await picker.getColumn(obj.firstColumnName);
      let secondColumn = await picker.getColumn(obj.secondColumnName);
      obj.firstColumnTextValue = firstColumn.options[firstColumn.selectedIndex].text;
      obj.secondColumnTextValue  = secondColumn.options[secondColumn.selectedIndex].text;
      
      obj.firstColumnIndex = firstColumn.selectedIndex;
      obj.secondColumnIndex = secondColumn.selectedIndex;

      //this.checkIfValidateOk();
      
    })
    
    console.log(obj);
    
  }

So when the user click "Valider", I'd like the function to at least true and the best should be to return my object obj, so when it's click I can assign the value to another variable in my main page when I use the function like that:

  async sizePicker() {

    await this.helpService.pickerTwoColumns(this.sizePickerObject).catch(resData => {
      console.log(resData);
    })
  }

But nothing happen in my main code, after clicking "Valider", actually I got the console.log return undefined when I open the function sizePicker whereas I'd like to have something happen when the "Valider" button is pressed...

Thanks for your help.

Answer 1

You can use Promises with async like so. I can't execute your code since I don't have the complete Class, but this should give you the idea.

Note : I didn't modify the validator method, but you can use the approach I outlined below to do validation work in the handler and resolve or throw an error accordingly.

First thing to do is return a Promise in the pickerTwoColumns:

    async pickerTwoColumns(obj: objectTwoColumns ) {
        return new Promise(resolve => {
       
            this.clearObject(obj.firstColumnOptions);
            this.clearObject(obj.secondColumnOptions);

You will then want to resolve the promise in the picker onDidDismiss method --> look for resolve(obj) call

    picker.onDidDismiss()
        .then(async data => {
            let firstColumn = await picker.getColumn(obj.firstColumnName);
            let secondColumn = await picker.getColumn(obj.secondColumnName);
            obj.firstColumnTextValue = firstColumn.options[firstColumn.selectedIndex].text;
            obj.secondColumnTextValue  = secondColumn.options[secondColumn.selectedIndex].text;
            
            obj.firstColumnIndex = firstColumn.selectedIndex;
            obj.secondColumnIndex = secondColumn.selectedIndex;
    
            //this.checkIfValidateOk();
            
            resolve(obj);
        })
        .catch((error)=> {
            //handle error
        })

Finally, I would use this pattern in sizePicker method too. You should resolve the data in the.then method and handle exceptions in.catch