how to iterate over generic interface in angular

user_7796282 0
Viewed 32

I'am relatively new to angular . I try to use genric interface in order to reuse pagination models from other models. with code I can explain better. here is my code for user model

export interface IUser{
id: string;
name: string;
email: string;
emailConfirmed: boolean;
twoFactorEnabled: boolean;
lockoutEnabled: boolean;
accessFailedCount: number;
role: string;
roleId: string;}

and this my pagination interface model

export interface IPagination<T> {
success: boolean;
pageIndex: number;
pageSize: number;
count: number;
data: T[];}

and this is my component ts class

users:IPagination<IUser[]>;
ngOnInit(): void {this.http.get("https://localhost:7105/api/auth/admin/User").subscribe((response:IPagination<IUser[]>)=>{this.users=response;},error=>{console.log(error);})}

everythings works fine except in component's html when I try to iterate over data this error comes

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

thanks in advance for your help

angular
1 Answers

I made a mistake in casting to interface in api call . here's correct way to call API

ngOnInit(): void { this.http.get("https://localhost:7105/api/auth/admin/User").subscribe((response:IPagination)=>{ this.users=response; },error=>{ console.log(error); }) }

Now it's working with this code sample in component html

<ul *ngFor="let item of users.data">
    <li>{{item.email}}</li>

But still I'm not sure if this is a correct way or not ?

user_77962820
Related