Question

我在这里已经找到了类似的问题，但是找不到足够的类似问题。将Ionic 4与Angular 7 Typescript 3.16结合使用我需要获取几个“ TimeSpan”值，因此从html中获取一个函数，如下所示：

<ion-input type="text" (click) =" getTypTime()" ....>

此点击处理程序是这样的：

getTypTime() { // Gets the typical time
  const currentTime = this.service.TimeToDoTypicalOrBestCase;
  this.getTime(currentTime).then( res => {
  console.log('GetTypTime result :');        // **3**
  console.log(res);
  });
}

呈现选择器并获取结果的函数如下：

async getTime(inputTime: TimeSpan) {
console.log(inputTime);             // **1**
const opts: PickerOptions = {
  buttons: [
        ...more stuff...
  ],
  columns: [
    {
      name: 'Hours',
        ...more stuff...
      ]
    },
    {
      name: 'Mins',
           ...more stuff...
    }
  ]
};
const picker = await this.pickerCtrl.create(opts);
console.log('Presenting picker');             // **2**
picker.present();
picker.onDidDismiss().then(() => {
  picker.getColumn('Hours').then( colh => {
    this.pickedTime.hours = colh.options[colh.selectedIndex].value;
    picker.getColumn('Mins').then( colm => {
    this.pickedTime.minutes = colm.options[colm.selectedIndex].value;
    console.log(this.pickedTime);             // **4**
    return this.pickedTime.ToString();
    });
  });
 });
}

日志输出：

00:30:00                       (This is a the top of the function **1** see code)
Presenting picker              (This is towards the end of the function **2**)
GetTypTime result : undefined  (This is in the CALLING function **3**)  
(The following line displayed after the dismiss **4**) 
TimeSpan {_seconds: 0, _minutes: 0, _hours: 0, _ days: 0, _milliseconds: 0, …}

该函数显然是在从选择器的ondismiss实际返回之前返回的，但是我认为这应该可行。谁能指出我要去哪里错了？。

我已将其更改为不再使用await ...，就像这样：

  picker.onDidDismiss().then(async () => {
  let col = await picker.getColumn('Hours');
  this.pickedTime.hours = col.options[col.selectedIndex].value;
  col = await picker.getColumn('Mins');
  this.pickedTime.minutes = col.options[col.selectedIndex].value;
  console.log(this.pickedTime);
  return this.pickedTime.ToString();
});

}

但是那没有用，所以我修改了它以删除等待状态。有想法吗？

Answer 1

尝试让它等待present进程，换句话说：

import { PickerController } from '@ionic/angular';

@Component({
  ...
})
export class ComponentPage {
  constructor(public pickerCtrl: PickerController) { }

  async openPicker() {
    const picker = await this.pickerCtrl.create({
      buttons: [...],
      columns: [...]
    });
    await picker.present();

     picker.onDidDismiss().then(() => {
        // Do your stuff
     });
  }
}

请参阅PickerController和Docs

Answer 2

我已经解决了问题，但会坦白仍然不能完全理解问题。但是，如果有人遇到类似的麻烦，我会以此为答案。

这归结为使用async ... await或... then（（）=> {}）处理承诺之间的区别。我来自c＃背景，因此可以使用async / await很好，因为它几乎可以完成所说的工作。但是，我在TypeScript中发现了不得不使用await并将其与.then（等）组合的情况。

无论如何，我确实通过将其转换为一直等待甚至将其添加到调用函数中来解决了该问题。这样做：

const picker = await this.pickerCtrl.create(opts);
await picker.present();
await picker.onDidDismiss();
const colh = await picker.getColumn('Hours');
this.pickedTime.hours = colh.options[colh.selectedIndex].value;
const colm = await picker.getColumn('Mins');
this.pickedTime.minutes = colm.options[colm.selectedIndex].value;
return this.pickedTime.ToString();

解决了订购问题，但返回的是undefined ..或更确切地说是调用函数：

  getTypTime() { // Gets the typical time
    const currentTime = this.service.TimeToDoTypicalOrBestCase;
    this.getTime(currentTime).then( res => {
    console.log('GetTypTime result :');
    console.log(res);
    });
  }

显示为未定义。只是当我将其修改为此：

  async getTypTime() { // Gets the typical time
  const currentTime = this.service.TimeToDoTypicalOrBestCase;
  const res = await this.getTime(currentTime);
  console.log('GetTypTime result :');
  console.log(res);

}

一切正常。

所以，谢谢那些仍然回答的人。

打字稿中的异步等待

2 个答案: