I am trying to make a ngFor but I receive the following error [![enter image description here][1]][1]
<div class="col-md-4" *ngIf="service | async as service"><!-- categoryes -->
<div *ngFor="let offer of offers">
<div *ngFor="let o of offer">
{{ o }}
</div>
</div>
</div>
component.ts
this.serviceDoc = this.afs.doc('service/Estética');
this.service = this.serviceDoc.valueChanges();
this.service.subscribe(data => {
this.offers = Array.of(data.service);
console.log(this.offers);
})
JSON.stringify(data.service)
{"Cabello":{"Cortes":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2FCortes.png?alt=media&token=f4b8243f-60fd-436c-877a-cd496cc6dd22","name":"Cortes"},"Peinados":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2FPeinados.png?alt=media&token=d2a87d76-a8f7-447d-bd35-3a3fdac54e07","name":"Peinados"},"Rizos":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2FRizos.png?alt=media&token=52bcf4b3-d5f3-44ba-a5b2-5475bf9332a3","name":"Rizos"},"Tintes":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2FTintes.png?alt=media&token=61ba135c-141d-47aa-a0f0-0ca277e302a1","name":"Tintes"},"color":"#4CAF50","icon":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category-icon%2Fcabello.png?alt=media&token=476af203-5d5a-49a5-bdd9-276e529d658f","img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category%2Fcabello_movil.jpg?alt=media&token=633c0664-6ebe-4af4-ab76-9b02de918482"},"Manos":{"Manicure":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fmanicure.png?alt=media&token=3fe6f405-ddc3-4d53-9b2b-c1a15b5afabe","name":"Manicure"},"Uñas":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fun%CC%83as.png?alt=media&token=c7cb50f2-bf06-40a9-a9b5-9d789a50ada6","name":"Uñas"},"color":"#9C27B0","icon":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category-icon%2Fmanos.png?alt=media&token=0ee0ab0f-9455-4be5-b8e1-6fb6fe63a61e","img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category%2Fun%CC%83as_movil.jpg?alt=media&token=59c858de-1b6e-47aa-a0ba-0797e6867b79"},"Novias y XV años":{"Maquillaje XV años":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fmaquillaje.png?alt=media&token=408f4919-e7bc-4ec5-a7f2-70c5e5def020","name":"Maquillaje XV años"},"Peinados XV años":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2FPeinados.png?alt=media&token=d2a87d76-a8f7-447d-bd35-3a3fdac54e07","name":"Peinados XV años"},"Uñas XV años":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fun%CC%83as_pies.png?alt=media&token=024e2b9a-41c7-4b82-a20b-4bca351c0ef5","name":"Uñas XV años"},"color":"#FCE4EC","icon":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category-icon%2Fnovias.png?alt=media&token=81612459-fd6f-4d81-b6cc-f766192226fe","img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category%2Fnovias_movil.jpg?alt=media&token=3bacc17f-3a19-4ce6-9a77-edabc8c2f290"},"Pies y piernas":{"Depilación":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fdepilacion.png?alt=media&token=213a6e55-866a-43cc-9772-bd0e6343a775","name":"Depilación"},"Pedicure":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fpedicure.png?alt=media&token=903f7408-77c3-42f8-81cb-d9b82daff061","name":"Pedicure"},"Uñas pies":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fun%CC%83as_pies.png?alt=media&token=024e2b9a-41c7-4b82-a20b-4bca351c0ef5","name":"Uñas en pies"},"color":"#03A9F4","icon":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category-icon%2Fpiernas.png?alt=media&token=07ce0132-04b0-4cdf-beb8-3148ff833ff9","img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category%2Fpiernas_movil.jpg?alt=media&token=c184e475-0e17-4f13-91a7-dcabdc9725be"},"Rostro":{"Cejas":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fcejas%20y%20pestan%CC%83as.png?alt=media&token=812676fe-96b0-4e18-b671-c15f21e0b533","name":"Cejas y pestañas"},"Exfoliacion":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fexfoliacion.png?alt=media&token=8293740f-e8fe-4881-80ae-60652af6e383","name":"Exfoliación"},"Maquillaje":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fmaquillaje.png?alt=media&token=408f4919-e7bc-4ec5-a7f2-70c5e5def020","name":"Maquillaje"},"Microblanding":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fmicroblanding.png?alt=media&token=b6fbd527-3964-47b9-bc4b-385e62f8c576","name":"Microblanding"},"color":"#FFC107","icon":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category-icon%2Fmaquillaje.png?alt=media&token=ae952f56-6bb7-4d26-99de-29cb9210c533","img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category%2Frostro_movil.jpg?alt=media&token=74f1e3ef-b732-48d8-8d66-37742956e0f9"},"Spa":{"Barro":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fbarro.png?alt=media&token=e2d05c09-39a2-48aa-a656-1769d3e5c07e","name":"Barro"},"Masaje":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fmasajes.png?alt=media&token=6df3e533-79dd-493e-9ce3-bd7ab284aab8","name":"Masaje"},"Piedras":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Fpiedras%20calientes.png?alt=media&token=70285d62-3699-41a8-890b-94c705e6a253","name":"Piedras calientes"},"Temazcal":{"img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/icon%2Ftemazcal.png?alt=media&token=835aa2fd-33c8-4b0b-9adb-8024266d3c7a","name":"Temazcal"},"color":"#795548","icon":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category-icon%2Fspa.png?alt=media&token=352dad9b-457e-4919-aede-68b7300bcfb7","img":"https://firebasestorage.googleapis.com/v0/b/micatalogo-online.appspot.com/o/category%2Fspa_movil.jpg?alt=media&token=bea4dd80-fde2-4e70-9113-e0ff6211537c"}}
Based on your JSON, actually,
this.offers = Array.of(data.service);
returns a Object of objects.As the error denotes You need an array to bind with ngFor. You can convert to array of objects with this
this.offers = Object.values(data.service)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments