typescript - 插入 ionic 3 的阵列不起作用

Question

我正在使用 ionic 3 和 firebase 构建一个应用程序。基本上，我希望能够拍摄多张照片，将这些照片上传到 firebase 存储，然后取回指向这些照片的链接，并将这些链接放在 firestore 中的文档中。但是，我遇到了包含下载 URL 的数组的奇怪行为。如果我运行该函数一次，它会将文档上传到 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 始终 == length。因此，收藏中的元素总是太多。

Answer 1

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

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

一种方法是使用 Observable ForkJoin，在 this page 中有描述。作为:

If you are familiar with Promises this is very similar to Promise.all(). The forkJoin() operator allows us take a list of Observables and execute them in parallel. Once every Observable in the list emits a value the forkJoin with emit a single Observable value containing a list of all the resolved values from the Observables in the list.

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

在您的特定情况下，我建议您在循环中调用存储数组，然后使用 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
    });
});

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