Angular | NgFor to display the array contents

Question

I am new to Angular and trying to get the values inside postdata, but when i am trying to iterate over it , its only giving me the first value. Attaching my code:

 posts;

 constructor(private getpostservice:GetpostsService) { }

 ngOnInit(): void {
  this.getpostservice.getposts().then(data=>{
  this.posts = [data];

  console.log("Inside home",this.posts);
 })
}

This is my html logic:

<tr *ngFor="let p of posts;index as i">


        <td>
          {{p.postdata[i].title}}
        </td>

      </tr>

.

Can someone help me to extract title and body please?

try changing to let p of posts.postdata and then <td> {{p.title}} </td> — MBB
– MBB, Commented Jul 30, 2021 at 16:11
Why are you storing your data as array this.posts = [data];? If your request response data is an array, you would have an array of arrays - bad idea. And if its just an object, then you would not need a loop to iterate over it. — Fussel
– Fussel, Commented Jul 30, 2021 at 16:14
@Fussel sir, can you please give an alternative way to render the data in angular? It would be very much helpful. — Subhodeep bhowmick
– Subhodeep bhowmick, Commented Jul 30, 2021 at 16:20
May be you are looking for nested *NgFor in this case something like here - stackblitz.com/edit/… — MBB
– MBB, Commented Jul 30, 2021 at 16:49

Fussel · Accepted Answer · 2021-07-30 16:21:31Z

2

I think what you are trying to achieve based on your console data is:

 constructor(private getpostservice:GetpostsService) { }

 ngOnInit(): void {
  this.getpostservice.getposts().then(data => {
    this.posts = data.postdata;
    console.log("Inside home",this.posts);
 });

and

<ng-container *ngIf="posts">
  <tr *ngFor="let p of posts">
    <td>
      {{p.title}}
    </td>
  </tr>
</ng-container>

Maybe you should also consider using Observables instead of Promises, it's a bit you have to get used to but it is way more powerful and more easy to use.

answered Jul 30, 2021 at 16:21

Fussel

1,8651 gold badge10 silver badges28 bronze badges

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

1 Comment

Rebai Ahmed Over a year ago

Yeah some opinion about using Observable instead of Promise, or another alternative is using the async pipe

Collectives™ on Stack Overflow

Angular | NgFor to display the array contents

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related