角度/离子错误错误：尝试区分“[object Object]”时出错只允许使用数组和可迭代对象

编程问答 2022-06-02

问题描述

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

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

PedidodissponibleService.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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularhtmlionic2ionic3ionic3javascript