Question

我正在使用

angular2
火力

我有什么

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

我想做什么

遍历对象中的每个项目并获取URL属性
将其传递到firebase存储变量
将URL属性推送到数组中以使我的HTML

注意：我通过对网址进行硬编码来完成这项工作，我只需要通过对象循环来获取对象中的其他网址。

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的数据绑定正确显示。凉。但是，我想循环遍历'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[]
    }
    */
});

Answer 2

如果我是正确的，那么你正在寻找一种解决方案，将对象的数组对象映射到实际的对象数组。

这是一种方法：

var object = {
  '0': {
    "url": "url1",
    "name": "obj1",
    "data": 1234
   },
  '1': {
    "url": "url2",
    "name": "obj2",
    "data": 5678
   },
   'length': 2
}

var sliced = Array.prototype.slice.call( object, 0 );

console.log(sliced)

情侣评论：

如果您想知道这是如何运作的，请查看this post。
您可能遇到的替代语法类似于[].slice.call()
如果您想执行类似数组的操作，您可以立即使用Array.prototype.<METHOD>.call(object, <CALLBACK>
例如：

Array.prototype.map.call(object, function(el) { // return your enhanced element })

Answer 3

所以，这很有效。不完全确定它有多干净。但它确实有效。

 this.activatedRoute.data
      .subscribe((
        data: { issueData: any, issueImageData: any }) => {
        this.issueToDisplay = data.issueData;
        this.imagesToDisplay = data.issueImageData;

        var localImageArray = [];

        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) {
            localImageArray.push(url);
          })

            this.getIssueImageArray(localImageArray);
        });


      });
  }

  // Get Image Array
  getIssueImageArray(array) {
    this.imageToDisplayArray = array;
  }

如何遍历对象并推入数组

3 个答案: