0

I have the following interfaces with Response having array and object. I want to display the data using ASYNC Pipe from the url provided. Result is Array and Info is Object. Inorder to display the value of Info , I get error saying

** error TS2322: Type 'Info' is not assignable to type 'NgIterable | null | undefined'.**

      **Model Interface** 
       interface Response {results: Result[];info: Info; }
       interface Result { gender: string; email: string;}
       interface Info { seed: string;results: number;}

       **TS**
        customerObs = this.http.get<Response>('https://randomuser.me/api/?format=json');
        constructor(private http: HttpClient) { }

        HTML 
        <ul *ngIf="customerObs | async as response">
              <li *ngFor="let result of response.results">{{result.gender}}</li>
              <li *ngFor="let info of response.info">{{info.seed}}
       </ul>
user17449555
  • 15
  • 2
  • 8

1 Answers1

0

You can only use *ngFor on arrays or sets. Here Info is an object not array, hence the error. Either make Info an array

       interface Response {results: Result[];info: Info[]; }

or change HTML to

              <li>{{response .info.seed}}
Pavan Jadda
  • 4,306
  • 9
  • 47
  • 79