Type 'Observable<client[]>' is not assignable to type 'NgIterable<any> | null | undefined'

Question

<!--client component.html-->
  <div *ngFor="let client of clientss">
  <h3>{{client.name}}</h3>
  </div>

/***client services****/
getclients() {
  return this.http.get<client[]>(`https://jsonplaceholder.typicode.com/users`);
}

    //client.component.ts
    import { Component, OnInit } from '@angular/core';
    import { Observable } from "rxjs";
    import { ClientsServicesService } from 'src/app/services/clients-services.service';
    import { client } from './client';
    
    @Component({
      selector: 'app-api-clints',
      templateUrl: './api-clints.component.html',
      styleUrls: ['./api-clints.component.css']
    })
    export class ApiClintsComponent implements OnInit {
      clientsApi:any=[]
    
      clientss!:Observable<client[]>;
    
      constructor(private clientervicss:ClientsServicesService) { }
    
      ngOnInit() {
    
        this.clientss = this.clientervicss.getclients();
    }
    }

    **//client interface**
    export interface client {
      id: number;
      name: string;
      email: string;
    }

am trying to run the code above but getting error Type 'Observable<client[]>' is not assignable to type 'NgIterable | null | undefined'. 22 <div *ngFor="let client of clientss"> ~~

src/app/components/api-clints/api-clints.component.ts:8:16 8 templateUrl: './api-clints.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component ApiClintsComponent.

Answer 1

You are assigning clients to observable, you must subscribe it;

this.clientervicss.getclients().subscribe(clients => {
this.clientss = clients;
});

Answer 2

Solution:

  <div *ngFor="let client of (clientss | async)">
    <h3>{{client.name}}</h3>
  </div>

Explanation:

clients is an observable, you have to subscribe to it, to get it's value, which is an ngIterable | null | undefined and which is accepted by ngFor

Note: The module where you client.component is MUST have in it's imports CommonModule OR a module that imports it.