Angular 项目：找不到“object”类型的不同支持对象“[object Object]”

Question

我几乎要辞职了。我有这个我无法解决的问题。对于我的第一个 Angular 项目，我遇到了以下错误： 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Array 等 Iterables

基本上我创建了一个调用外部 json 文件的服务 在服务中我放了这些方法：

export class PiattiService {

  url="https://mywebsite.eccc/db.json";
  constructor(private http:HttpClient) { }




  get():Observable<Piatto[]>{
    return this.http.get<Piatto[]>(this.url);
  }

我通过声明与我得到的json文件等效的字段来创建一个接口类

export class Piatto{
  id:number;
  titolo:string;
  image:string;
  label:string;
  prezzo:string;
  categoria:string;
  inevidenza:string;
  commenti:string;
}

在 COMPONENT TS 文件中，我按如下方式调用此服务：

export class MostrapiattiComponent implements OnInit {

  piatti:Piatto[];
 

  constructor(private http:HttpClient, private servizioPiatti:PiattiService) { }




  ngOnInit() {
      this.servizioPiatti.get().subscribe((osserva)=>{
      this.piatti=osserva;
    })
  }

}

在 html 文件中，我尝试从 *ngfor 迭代所有内容

<tr *ngFor="let piatto of piatti ">
    <td>{{piatto.id}}</td><td>{{piatto.titolo}}</td>
  </tr>

但是出错了

Answer 1

你需要用一个空数组初始化piatti:Piatto[]。

piatti:Piatto[]=[];

您还需要更新 HTTP 调用，因为它没有返回数组。

return this.http.get<Piatto[]>(this.url).pipe(map(res=>res.piatti))

Answer 2

我已经解决了。谢谢大家