*ngFor subarray object - Angular + Firebase

Question

I am trying to use a simple ngFor but I am dealing with one problem.

Object

export class Post {
  $key: string;
  title: string;
  subtitle: string;
  postedBy: string;
  imageUrl: string;
  paragraphs: [] = [];
}

my intention is to use the following HTML code:

<p *ngFor="let p of databaseService.selectedPost[0].paragraphs">a</p>

meaning that I want to show one paragraph per paragraph of my object but I get this error:

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

I have tried to use console.log(this.selectedPost[0].paragraphs.p1); being p1 there first of my paragraphs and it actually works but I am not able to do it from HTML (it has p1, p2, p3.. as names). The next picture shows the console.log

This is the object in the database:

How could I do it?

databaseService.selectedPost[0].paragraphs should be array. Is it? — Nitesh Rana
– Nitesh Rana, Commented Feb 26, 2019 at 19:30
I would say that it is an array, I have updated the question — bellotas
– bellotas, Commented Feb 26, 2019 at 19:32
Please check if your data is array inside array or two connected arrays. You need to treat them as such — Nitesh Rana
– Nitesh Rana, Commented Feb 26, 2019 at 19:37
The data is what is how the picture shows. First an array (1 would be the 1st post of the array) and inside of this array you have some elements, including "paragraphs" what I guess it is another array (where p1, p2, p3 are the elements) — bellotas
– bellotas, Commented Feb 26, 2019 at 19:39
If these are connected arrays you can try something like first access the top array and then access the actual array you want. So you need to nest ngFor in html — Nitesh Rana
– Nitesh Rana, Commented Feb 26, 2019 at 19:47

ambs · Accepted Answer · 2019-02-26 19:52:12Z

1

By the sounds of things, databaseService.selectedPost[0].paragraph is an object, as you said, you can directly access p1.

I have tried to use console.log(this.selectedPost[0].paragraphs.p1); being p1 there first of my paragraphs and it actually works

If that is the case, you can use Angular's KeyValuePipe to iterate through with an *ngFor

A working example would look like:

<p *ngFor="let paragraph of databaseService.selectedPost[0].paragraphs | keyvalue">{{ paragraph.value }}</p>

edited Feb 26, 2019 at 19:52

answered Feb 26, 2019 at 19:39

ambs

4873 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bellotas Over a year ago

This almost works but it does not. If I write "<p *ngFor="let paragraph of databaseService.selectedPost[0].paragraphs | keyvalue">Hello</p>" it writes 6 times a paragraph with "Hello", but I am not able to access to the variable. Using {{paragraph}} shows "[object Object]" and if I try {{p1}} it shows nothing

ambs Over a year ago

sure, so a paragraph is an object too, it will have attributes. Do you know what the structure of it looks like? for example, if there is a property text on the object paragraph you can insert {{ paragraph.text }} into the HTML (just an example)

bellotas Over a year ago

it is what I am trying. The structure of the whole object is in the question. In the paragraph array you have p1, p2, p3, p4... but trying to use {{paragraph.p1}} fails

ambs Over a year ago

Please see my updated HTML snippet, i am now doing {{ paragraph.value }}

ambs Over a year ago

Brilliant, glad i could help :)!

Collectives™ on Stack Overflow

*ngFor subarray object - Angular + Firebase

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related