ANGULAR/IONIC ERROR 错误：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象答案

【问题标题】：ANGULAR/IONIC ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowedANGULAR/IONIC ERROR 错误：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象
【发布时间】：2021-03-31 16:59:06
【问题描述】：

当我想使用 REST API 从服务器接收数据并通过模式将其显示在 HTML 组件中时出现此错误。如果我在控制台中获取数据，但在我的 HTML 视图中没有。

ERROR 错误：尝试比较“[object Object]”时出错。只允许使用数组和可迭代对象

PedidodisponibleService.ts

export class PedidodisponibleService {

  private url = 'http://www.server.llama-ya.com';

  constructor(private http: HttpClient) { }

getPedido(): Observable<Pdisponible[]>{
    const path = `${this.url}/PedidoDisponible`;
    return this.http.get<Pdisponible[]>(path);
  }
}

界面

export interface Pdisponible {
    Valor?: true;
    Id?: number;
    Monto: string;
    Distancia: string;
    Tiempo: string;
    DondeCobrar: string;
}

modalpedido.page.ts


export class ModalpedidoPage implements OnInit {

    pedido: any = [];

  constructor(
    public modalController: ModalController,
    private pedidoDisponible: PedidodisponibleService
   ) { }

ngOnInit() {

    this.pedidoDisponible.getPedido().subscribe(
      res => {
        this.pedido = res as any;
        console.log(res);
      }, 
      error => console.log(error + "No podemos procesar pedidos")
      /*err => console.error(err)*/
    );
    }

  }

modalpedido.page.html

<ion-header>
  <ion-toolbar>
  </ion-toolbar>
</ion-header>

  <ion-content>

  <ion-card>

    <ion-item lines="none">
      <ion-label>
        <h1> Incoming Order </h1>
      </ion-label>
    </ion-item>

    <ion-item *ngFor="let pe of pedido">
      <ion-label>
       
        <h2> ORDER DESCRIPTION </h2>
        <h3> {{pe.Monto}} </h3> 
        <h3> {{pe.DondeCobrar}} </h3> 
        <p> {{pe.Distancia}} </p> 
        <p> {{pe.Tiempo}} </p> 
      </ion-label>
    </ion-item>

  </ion-card>

</ion-content>

【问题讨论】：

请用英语发帖，或者用西班牙语发帖，请使用Stack Overflow en español

标签： javascript html angular ionic2 ionic3

【解决方案1】：

原因是您没有收到数组 else 和对象。您可能收到了，例如有些像{data:[1,2,3]}，

那么 getPedido 应该是这样的

  this.httpClient.get(...).pipe(map(x=>x.data))

您看到我们不只返回响应的属性“数据”。

或在订阅中

this.pedidoDisponible.getPedido().subscribe(
      (res:any) => {
        this.pedido = res.data;
      },

【讨论】：