Iterating *ngFor in Ionic

user_19632972 0
Viewed 58

I am trying to iterate an array using *ngFor, but it's not working. below is my code.

My API Data showing like this in console widow

TypeScript Code

  tailors: Tailors[] = [];

  getTailors() {
    this.tailorService.getTailors().subscribe(x => {
      Object.assign(this.tailors, x);
      console.log(x);
    });
  }

HTML

<ion-item class="animate__animated animate__fadeInUp" *ngFor="let tailor of tailors">
  <div class="item_inner d-flex">
   
    <div class="text_box">
      <h3>{{tailor.data.Name}}</h3>
    
    </div>
  </div>
</ion-item>
ionic-framework angular typescript
1 Answers

Your bounded property in the *ngFor is an object literal not an array. You have to loop through tailors['data'].

I assume you have an error stating "NgFor only supports binding to Iterables such as Arrays".

Your code in the template should be

*ngFor="let tailor of tailors['data']"

Or better when you assign the backend response inside the .ts you bind the tailors to x['data'] and then you do not need to change anything in the template.

PS: I do not see a need of your usage of Object.assign(). Also include errors in your next posts to help people help you.

user_141007450
Related