javascript - 使用 firebase 列表数据加载 Ionic 警报

Question

问题很明确，我需要显示带有 firebase 列表元素的警报。

Alert creation

let alert = this.alertCtrl.create({
      title: 'Elegir repartidor',
      inputs: [],
      buttons: [
        {
          text: 'Asignar',
          handler: data => {
              this.firebaseService.updateOrderAssignDeliverymen(orderKey, data);
              },
          role: 'cancel'
        }
      ]
    });
    this.firebaseService.getDeliveryMenFillAlert(alert).then(res => alert.present());

Alert Inputs creation

getDeliveryMenFillAlert(alert: AlertController) {
    this.afd.list('/users', ref => ref.orderByChild('role').equalTo('Repartidor'))
      .snapshotChanges()
      .subscribe( res =>
        res.map(action => {
          alert.addInput({
            type: 'radio',
            label: action.payload.val().name,
            value: action.key
          })
        }),
        error => console.log(error));
  }

在阅读了很多问题之后，对不同方法的数量感到非常惊讶......更惊讶的是我还没有成功。

First attempt

创建了第二个函数，其中包含一个简单的 promise return to try。一切正常。

getDeliveryMenFillAlert2(alert: AlertController) {
return Promise.resolve(true);
//return Promise.reject(false);

this.firebaseService.getDeliveryMenFillAlert2(alert)
  .then(resolve => console.log('Resolve: ' + resolve),
        reject => console.log('Reject: ' + reject));

Second attempt

试图在我的原始函数中插入这个简单的 return，当然会更改对该原始函数的调用。

getDeliveryMenFillAlert(alert: AlertController) {
this.afd.list('/users', ref => ref.orderByChild('role').equalTo('Repartidor'))
  .snapshotChanges()
  .subscribe( res =>
    res.map(action => {
      alert.addInput({
        type: 'radio',
        label: action.payload.val().name,
        value: action.key
      });
      return Promise.resolve(true);
    }),
  error => {
    console.log(error)
    return Promise.reject(false);
  });

但是会抛出错误“TypeError:无法读取未定义的属性‘then’”。

Third attempt

向函数添加了 return Promise。同样的错误。

getDeliveryMenFillAlert(alert: AlertController): Promise {

第四次尝试阅读其中一个问题，它介绍了异步/等待概念，因此我将“异步”引入函数，将“等待”引入响应。

async getDeliveryMenFillAlert(alert: AlertController): Promise {

return await Promise.resolve(true);

Recibe 另一个错误“ Uncaught Error :模块解析失败:关键字‘yield’被保留”。

Last try

不知道为什么，只是删除了“await”但在函数中保留了“async”，它没有检索到任何错误(很好)但是调用的 console.log 打印“Resolve: undefined”。

所以它似乎正在解决但不起作用。

我还尝试返回“new Promise...”和“true.toPromise()”而不是“return Promise.resolve(true)”，我在某处读到它但没有任何效果。请提供任何帮助，我正在努力但无法做到。

最终解决方案(不能作为回复发布)

getDeliveryMenFillAlert(alert: AlertController) {
    return new Promise(resolve => {
    this.afd.list('/users', ref => ref.orderByChild('role').equalTo('Repartidor'))
      .snapshotChanges()
      .subscribe( res =>
        res.map(action => {
          alert.addInput({
            type: 'radio',
            label: action.payload.val().name,
            value: action.key
          });
          resolve(alert);
        }))
      });
   }

调用将是:

this.firebaseService.getDeliveryMenFillAlert2(alert)
      .then(resolve => alert.present());

Answer 1

我猜你是在这个调用之后调用 alert.present() :

this.firebaseService.getDeliveryMenFillAlert(alert);

如果是这样，您可能希望在显示警报之前等待回调结束。

• 快速修复 可能是在设置输入 后显示警报:

alert.addInput({
  type: 'radio',
  label: action.payload.val().name,
  value: action.key
});
alert.present();

• 但是更好的方法是从您的getDeliveryMenFillAlert 函数返回一个promise。并在成功回调中调用 alert.present() :

this.firebaseService.getDeliveryMenFillAlert(alert)
    .then(res => alert.present());