离子 3 中的阵列推入不起作用答案

【问题标题】：Array pushing in ionic 3 not working离子 3 中的阵列推入不起作用
【发布时间】：2018-05-25 04:10:10
【问题描述】：

我正在使用 ionic 3 和 firebase 构建应用。基本上，我希望能够拍摄多张照片，将它们上传到 Firebase 存储，然后获取指向这些照片的链接并将这些链接放在 Firestore 中的文档中。但是，我遇到了包含 downloadURLs 的数组的奇怪行为。如果我运行该函数一次，它会将文档上传到 Firestore，但带有下载链接的数组是空的。如果我再次运行该功能，则会显示链接。这是我的代码：

变量：

export class AboutPage {

  public photos: any;
  public downloadURLs: any;
  public link: string;
  public base64Image: string;

ngOnInit() {
    this.photos = [];
    this.downloadURLs = [];
  }

功能：

// Note: The uploading of the images works completely fine

  uploadForm() {
    //var testArray = [];
    var kuerzel = "teacher";
    var lehrerKuerzel = kuerzel.toUpperCase();
    var date = Date();
    var length = this.photos.length;
    var i = 0;
    while(i < length){
      const ref = firebase.storage().ref(`pruefungen/${lehrerKuerzel}/${date}/${i}`);
      ref.putString(this.photos[i], 'data_url').then((snapshot) => {
        this.downloadURLs.push(snapshot.downloadURL);
      });
      if(i + 1 == length)
      {
        var db = firebase.firestore().collection(`${lehrerKuerzel}`);
        db.add({
          TestName: pruefungsName,
          Klasse: klasse,
          Abteilung: abteilung,
          Datum: date,
          DownloadURLs: this.downloadURLs,
          Length: length,
          I: i
        });
      }
      i += 1;
    }

  }

我尝试过的：

使用本地数组
把 db.add({});在 .then() 中，虽然数组总是完全显示，但包含 i 的 if 语句总是正确的，因为某些原因 i 总是 == 长度。因此，集合中的项目总是太多。

【问题讨论】：

一件事...使用 ionic 你想在 ionViewDidLoad 生命周期钩子中初始化 downloadURLs 和 photos...它的触发时间与 angular 的 ngInit 略有不同
我试过这个，但是我不能再拍照，这让我相信它根本没有被初始化。还有其他想法吗？

标签： typescript firebase ionic-framework ionic3

【解决方案1】：

上传函数res.putString 异步工作，这意味着您的while 循环运行到完成在文件实际上传之前，所以this.downloadURLs === [] 在添加记录时，并且仅稍后填充，因为照片一张一张完成。

在添加记录之前，您应该等待所有上传完成，因此您已经有所有下载 url 可以写入数据库。

一种方法是使用 Observable ForkJoin，在 this page 中描述为：

如果您熟悉 Promises，这与 Promise.all() 非常相似。 forkJoin() 运算符允许我们获取 Observable 列表并并行执行它们。一旦列表中的每个 Observable 发出一个值，forkJoin 就会发出一个 Observable 值，该值包含列表中 Observables 中所有已解析值的列表。

那篇文章为您提供了处理此类需求的各种示例。

在您的特定情况下，我建议您在循环中进行存储调用数组，然后使用 ForkJoin 等待结果然后进行记录，如下所示：

// extra import you'll need
import { forkJoin } from "rxjs/observable/forkJoin";

var kuerzel = "teacher";
var lehrerKuerzel = kuerzel.toUpperCase();
var date = Date();
var upload = this.photos.map(i => {
    const ref = firebase.storage().ref(`pruefungen/${lehrerKuerzel}/${date}/${i}`);
    return ref.putString(i, 'data_url');
});
forkJoin(upload).subscribe(results => {
    // results is an array of snapshots
    var db = firebase.firestore().collection(`${lehrerKuerzel}`);
    db.add({
        TestName: pruefungsName,
        Klasse: klasse,
        Abteilung: abteilung,
        Datum: date,
        DownloadURLs: results.map(i => i.downloadURL),
        Length: this.photos.length,
        I: this.photos.length - 1
    });
});

尚未测试代码，但该想法应该可行，您可以再次在链接文章中找到更完整的示例。

【讨论】：

我想我明白了它的要点，但是当我尝试运行它时，它会吐出这个错误：属性 'downloadURL' 在 type{} 上不存在。你知道这是什么吗？
你看过console.log(results)提供的数据了吗？
在我看来，编译器正在尝试验证类型是否正确使用，但不知道结果是什么。尝试添加class Snapshot { downloadURL: string }，然后添加subscribe(results: Snapshot[] {})，可以。
我有点菜鸟，我应该在哪里添加这个？
在forkJoin之前添加类声明，以便编译器找到定义。

【解决方案2】：

使用promises 和Promise.all 组成的数组：

...

let promises = [];
while(i < length){
  promises.push(new Promise(resolve, reject) {
    const ref = firebase.storage().ref(`pruefungen/${lehrerKuerzel}/${date}/${i}`);
    ref.putString(this.photos[i], 'data_url').then((snapshot) => {
      this.downloadURLs.push(snapshot.downloadURL);
      resolve();
    }).catch(e => {
      console.log(e);
      reject();
    });
  })
  i++;
}

Promise.all(promises).then(() => {
  var db = firebase.firestore().collection(`${lehrerKuerzel}`);
  db.add({
    TestName: pruefungsName,
    Klasse: klasse,
    Abteilung: abteilung,
    Datum: date,
    DownloadURLs: this.downloadURLs,
    Length: length,
    I: i
  });
})

【讨论】：