jsonangulartypescriptasync-pipenested-json

Type 'AA' is not assignable to type 'NgIterable<any> | null | undefined' in Angular

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>
Solution

  • I got it working by changing *ngFor to *ngForOf

    <li *ngFor="let info of response.info">{{info.seed}}

    to

    <li *ngForOf="let info of response.info">{{info.seed}}

    Reference: https://v17.angular.io/api/common/NgForOf