Question

我正试图从我的API中获取值，但无法在ion-list中显示。 Screenshot of the error

您可以在图像中看到，我从api中获得了数据，但可以在ion-list中显示它们。 HTML就是这个

<ion-list>
<ion-item *ngFor="let item of (results | async)">

  <ion-label text-wrap>{{item.nombreProducto}}</ion-label>
  <ion-button color="light"><img src="../../assets/icon/binoculars.png" alt="" (click)="presentarModal()" item-end></ion-button>
  <ion-button color="light"><img src="../../assets/icon/cart.png" alt="" (click)="addCart()" item-end></ion-button>
</ion-item>

我创建的服务具有名为getAll的方法

getAll(): Observable<any>{
return this.http.get(`${this.url}`).pipe(
  map(results=>{
    console.log('Data', results);
    return results['Data'];
  })
);

}

在我的home.page.ts中，getAll方法包含了这个

getAll(){
  this.results = this.productService.getAll();
}

Answer 1

对于角度版本4.x和更高版本，异步管道的语法以及如何在ngFor中引用其值可能不正确，请尝试：

<ion-list>
<ion-item  *ngFor="let item of results | async as item">

  <ion-label text-wrap>{{item.nombreProducto}}</ion-label>
  <ion-button color="light"><img src="../../assets/icon/binoculars.png" alt="" (click)="presentarModal()" item-end></ion-button>
  <ion-button color="light"><img src="../../assets/icon/cart.png" alt="" (click)="addCart()" item-end></ion-button>
</ion-item>

更好地解释了角度版本之间的此语法更改：

“虽然在版本2中我们不得不退后于在组件类中订阅Observable，但Angular 4现在使我们可以通过将Observable的异步结果分配给模板变量来处理这种情况”

https://juristr.com/blog/2017/06/new-enhanced-ngIf-and-ngFor/#enumerate-ngfor-loops-using-as-and-async-pipes

Answer 2

results是一个对象数组，您要在不存在的rxjs results['Data']中返回map。我假设您自己的console.log使您感到困惑，以为该结构具有Data属性。

Answer 3

您正在尝试访问数组中不存在的键。 results是您要查找的要返回的数据。将您的方法更新为以下内容：

getAll(): Observable<any>{
return this.http.get(`${this.url}`).pipe(
  map(results=>{
    console.log('Data', results);
    return results;
  })
);

尝试从我的API ionic 4获取值时遇到问题

3 个答案: