Ionic Picker服务函数点击确认后返回结果对象的实现问题

问题根因 #

你的代码核心问题是pickerTwoColumns作为async函数，没有等待picker关闭后的选择逻辑执行完成就提前返回了。onDidDismiss的回调是异步执行的，原来的代码走到末尾console.log(obj)的时候用户还没点击确认按钮，且函数本身没有显式返回值，所以调用方拿到的默认就是undefined。

修复后的服务端代码 #

async pickerTwoColumns(obj: objectTwoColumns ): Promise<objectTwoColumns> {
  this.clearObject(obj.firstColumnOptions);
  this.clearObject(obj.secondColumnOptions);
  let options: PickerOptions = {
    backdropDismiss: false,
    buttons: [
      // 若需要取消按钮可放开注释
      // {
      //   text: 'Annuler',
      //   role: 'cancel'
      // },
      {
        text: 'Valider',
        role: 'confirm' // 给确认按钮加标识方便后续判断操作类型
      }
    ],
    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',
      },
    ]
  };

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

  await picker.present();
  // 等待picker关闭，拿到关闭触发的来源
  const dismissData = await picker.onDidDismiss();
  // 仅当用户点击确认按钮时返回处理后的结果
  if (dismissData.role === 'confirm') {
    const firstColumn = await picker.getColumn(obj.firstColumnName);
    const 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;
    // 返回处理完成的obj对象
    return obj;
  } else {
    // 用户取消选择时抛出错误，进入调用方的catch分支
    throw new Error('用户取消选择');
  }
}

调用端代码修改 #

async sizePicker() {
  try {
    // 拿到选择完成后返回的obj对象
    const selectedRes = await this.helpService.pickerTwoColumns(this.sizePickerObject);
    console.log('选择结果', selectedRes);
    // 此处写你的赋值、后续业务逻辑
  } catch (err) {
    // 此处写用户取消选择的处理逻辑
    console.log('取消选择', err);
  }
}

内容的提问来源于stack exchange，提问作者Yann92