Issue
Try to iterate an array using *ngFor but it's not worked. 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>
Solution
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.
Answered By - onrails
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.