使用 Firebase 列表数据加载 Ionic 警报

Posted 2023-02-23

【中文标题】使用 Firebase 列表数据加载 Ionic 警报

【英文标题】：Load Ionic alert with firebase list data

【发布时间】：2018-08-21 14:31:34

【问题描述】：

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

警报创建

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

警报输入创建

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

在阅读了许多问题后，对不同方法的数量感到非常惊讶......更惊讶的是我无法成功地使用一种方法。

第一次尝试

创建了第二个函数，带有一个简单的 promise return 来尝试。一切正常。

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

第二次尝试

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

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: Cannot read property 'then' of undefined”。

第三次尝试

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

getDeliveryMenFillAlert(alert: AlertController): Promise 

第四次尝试 阅读其中一个问题，它介绍了 async/await 概念，所以我在函数中引入了“async”，在响应中引入了“await”。

async getDeliveryMenFillAlert(alert: AlertController): Promise 

return await Promise.resolve(true);

Recibe 另一个错误“未捕获的错误：模块解析失败：保留关键字 'yield'”。

最后一次尝试

不知道为什么，只是删除了“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());

【参考方案1】：

我猜你在这个电话之后打电话给alert.present()：

this.firebaseService.getDeliveryMenFillAlert(alert);

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

快速修复

可能是在设置 inputs 后显示警报：

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

【讨论】：

第一种方法有效（很好），但正如您所建议的，我想使用更好的方法。我想这里我真的不需要返回任何数据，所以“res”是没用的。观看其他问题以了解我尝试返回 new Promise(true) 的承诺； return new Promise((res) => res(true); );但它抛出错误“无法读取未定义的属性”，我应该返回什么？

你应该阅读this 来了解promise。 This thread 解释如何处理 observable，而不是像我建议的那样将你的函数包装在 promise 中。

您的链接以及许多其他有关已阅读承诺的问题和视频，将写一个答案以提供更多详细信息