arrays - 如何遍历一个对象并插入一个数组

Question

我在做什么

• Angular 2
• 火力点

我有什么

• 一个返回的对象
• 对象中的每一项都有一个 URL 属性

我想做什么

• 遍历对象中的每一项并获取 URL 属性
• 将其传递到 Firebase 存储变量中
• 将 URL 属性插入一个数组以供我的 HTML 使用

注意:我通过对 url 进行硬编码来实现这一点，我只需要一些帮助来遍历对象以获取对象中的其他 url。

Component.ts

'this.imagesToDisplay' 将返回对象的对象(下图)

this.activatedRoute.data
  .subscribe((
    data: { issueData: any, issueImageData: any }) => {
    this.issueToDisplay = data.issueData;
    this.imagesToDisplay = data.issueImageData; 

    this.testing(this.imageToDisplayArray); 

  });

组件 TS - 测试方法

所以这是硬编码并将硬编码的 url 插入数组并通过与 HTML 的数据绑定(bind)正确显示。凉爽的。但是，我想遍历“imagesToDisplay”对象并获取两个返回的 url。

  testing(imageToDisplayArray) {
    
    // this works with one url
    var storage = firebase.storage().ref().child("image/-Kosd82P-bmh4SFetuf3/-Kosd8HhGmFiUhYMrlvw/30DD9F39-4684-4AA0-9DBF-3B0F0C3450A4.jpg");
    storage.getDownloadURL().then(function(url) {
    imageToDisplayArray.push(url);
        console.log(imageToDisplayArray);
    });

  }

如有任何帮助，我们将不胜感激。

注意:我认为这里的这个问题是我想做的，我只是不确定如何将它集成到我当前的代码中。任何帮助都是极好的。 Stack Overflow question on firebase storage looping

更新

所以，我现在非常接近。我只有一个问题。下面的代码遍历返回的数据并提取 URL 属性。我使用 url 属性连接到 firebase 存储并返回下载 URL。这两个都记录到控制台!惊人的。我现在有了我需要的 URL!我遇到的问题是，它只会让我将这些值推送到本地数组。在本例中为“var array”。我需要推送到“activatedRoute”“方法”之外的数组。每当我这样做时，它都会以未定义的形式返回。

this.activatedRoute.data
      .subscribe((
        data: { issueData: any, issueImageData: any }) => {
        this.issueToDisplay = data.issueData;
        this.imagesToDisplay = data.issueImageData;

        var array = [];

        data.issueImageData.forEach(image => {

          // Reference to the image URL
          var image = image.url;

          // Firebase storage
          var storage = firebase.storage();

          // Path reference
          var imagePathReference = storage.ref().child(image);

          // Get Download URL
          imagePathReference.getDownloadURL().then(function (url) {
            console.log(url);
            array.push(url);
          })
        });


      });

Answer 1

我建议您使用 rxjs 为您提供的功能:

this.activatedRoute.data.switchMap(data => {
    let parsedData = { 
        issueToDisplay: data.issueData,
        imagesToDisplay: data.issueImageData
    }
    let imageUrls$ = data.issueImageData.map(image => {
        var imagePathReference = storage.ref().child(image);
        return Observable.fromPromise(imagePathReference.getDownloadURL())
    });
    return Observable.forkJoin(imageUrls$).map((...urls) => {
        return Object.assign(parsedData, { urls });
    })
}).subscribe(data => {
    /* 
    data looks like this:
    {
        issueToDisplay: any,
        imagesToDisplay: any,
        urls: string[]
    }
    */
});