Return 来自离子服务中函数的对象（离子选择器）

Question

在我的应用程序中，我想要一个不同的 picker，有两列或三列，所以我制作了 2 个不同的函数来简化代码。现在，当按下 Validate button 时，我想 return 我的对象和我的结果。我想我需要处理Promise，但我不太熟悉它，我觉得我做错了。

这是我的服务中的功能：

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

所以当用户单击“Valider”时，我希望该函数至少为 true，最好是 return 我的对象 obj，因此当它被单击时我可以将值分配给另一个当我使用这样的函数时，我主页中的变量：

  async sizePicker() {

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

但是在我的主代码中没有任何反应，在点击“Valider”之后，实际上我在打开函数 sizePicker 时得到了 console.log return undefined 而我想按下 "Valider" 按钮时发生了什么...

感谢您的帮助。

Answer 1

您可以像这样将 Promises 与异步一起使用。我无法执行您的代码，因为我没有完整的 Class，但这应该可以让您了解。

注意：我没有修改验证器方法，但您可以使用我在下面概述的方法在处理程序中进行验证工作并相应地解决或抛出错误。

首先要做的是 return pickerTwoColumns 中的 Promise：

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

然后您将希望在选择器 onDidDismiss 方法中解决承诺 --> 查找 resolve(obj) 调用


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

最后，我也会在 sizePicker 方法中使用这个模式。您应该在 .then 方法中解析数据并在 .catch

中处理异常

Return 来自离子服务中函数的对象（离子选择器）

Return object from function in a service in ionic (ionic picker)

ionic-framework

angular