Ionic Firebase NgFor only supports binding to Iterables such as Arrays

Question

I have an ionic app which gets data from Firebase .

{  
   "id":"-KysCBOOwaUnwX19RX0N",
   "nome":"Mais um teste de inclusao",
   "larguraPorta":"50",
   "alturaPorta":"20",
   "comprimento":"100",
   "telefone":"123456",
   "nmarquivo":"",
   "inicioOperacao":"00:00",
   "fimOperacao":"00:00",
   "temBwc":false,
   "temSalaVip":true,
   "temSalaAis":true,
   "temVigilancia":false,
   "temDormitorio":false,
   "temGpu":false,
   "temReboque":true,
   "temWifi":false,
   "aeroporto":{  
      "OACI":"SBPA",
      "UF":"RS",
      "municipio":"Porto Alegre",
      "nome":"Salgado Filho"
   },
   "imagens":{  
      "x1":{  
         "path":"http://static.progressivemediagroup.com/uploads/imagelibrary/nri/airport/clients/Jewers%20Doors/jewersld-2.jpg"
      },
      "x2":{  
         "path":"http://www.compasscommercial.com/wp-content/uploads/2017/01/1900-Airport-Way-FP1.jpg"
      }
   }
}

I want to display the group of images into an ion-slide with ngFor. But I am having issues like these:

NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

How to convert my firebase data into something that can be used in the ngFor?

<ion-item *ngFor="let ima of items.hangar; let i = index" >
<ion-slides class="to-top" pager>
<ion-slide *ngFor="let x of ima.imagens">

I was able to create the slide with the variable below, without getting the data from firebase.

params: any = {};
           this.params.data = {
                    "items": [
                        {
                            "id": 1,
                            "title": "Nutrioso",
                            "subtitle": "Friday, August 07, 2017",                           
                            "imagens": [
                                {
                                    "id": 1,
                                    "image": "assets/images/gallery/nutrioso/1.jpg"
                                },
                                {
                                    "id": 2,
                                    "image": "assets/images/gallery/nutrioso/4.jpg"
                                }
                            ]
                        },
                        {
                            "id": 2,
                            "title": "Bluetown",
                            "subtitle": "Wednesday, July 05, 2017",                           
                            "imagens": [
                                {
                                    "id": 1,
                                    "image": "assets/images/gallery/bluetown/20.jpg"
                                },
                                {
                                    "id": 2,
                                    "image": "assets/images/gallery/bluetown/19.jpg"
                                }
                            ]
                        }
                    ]
                };

How do I convert the firebase structure to something like this?

let array = Object.entries(ima.imagens)...and then log the array to see what structure it gives you...you will get an array but im not sure what it will look like..im referencing https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries — ewizard, Nov 24 '17 at 03:17
I got this: Property 'entries' does not exist on type 'objectConstructor' in my typescript file using Object.entries — Rodrigo Andreatta, Nov 24 '17 at 09:59
looks like this is probably the problem...im not exactly sure where in the code they are talking about changing....https://stackoverflow.com/questions/45422573/property-entries-does-not-exist-on-type-objectconstructor ...there is probably another way — ewizard, Nov 24 '17 at 15:18
you could use a `for...in` loop on ima.imagens in your constructor and push `path`, or `path` and `id,` as an object if thats what you need...also the settings for `es2017` are in `tsconfig.json` — ewizard, Nov 24 '17 at 15:22
i thought i had the answer but realized you have the `ngfor` inside `ngfor`......is `items.hangar` an `object` or an `array`? — ewizard, Nov 24 '17 at 16:15
Please post the response you are getting as JSON instead of image :) — AT82, Nov 24 '17 at 20:33

Ionic Firebase NgFor only supports binding to Iterables such as Arrays

0 Answers0