类型 'Observable<client[]>' 不可分配给类型 'NgIterable<any> |空 |不明确的'

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

我正在尝试运行上面的代码但出现错误 类型 'Observable' 不可分配给类型 'NgIterable |空 |不明确的'。 22

~~

src/app/components/api-clints/api-clints.component.ts:8:16 8 templateUrl: './api-clints.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件ApiClintsComponent的模板出错。

【问题讨论】：

• 我认为你应该在 .html 中使用异步管道来获取数据。

Answer 1

您将客户端分配给 observable，您必须订阅它；

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

Answer 2

解决方案：

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

解释：

clients 是一个 observable，你必须订阅它，才能获得它的值，它是一个 ngIterable | null | undefined 并且被 ngFor 接受

注意： client.component 所在的模块必须包含 imports CommonModule 或导入它的模块。