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

Question

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> 

Answer 1

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