尝试从我的 API Ionic 4 获取值时出现问题

Question

我正在尝试从我的 API 中获取值，但我无法在 ion-list 中显示它们。

错误截图：

正如您在图像中看到的那样，我从 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

对于 angular 版本 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>

angular 版本之间的这种语法变化在这里得到了更好的解释：

"While in version 2 we had to fallback to subscribing to the Observable in the component class, Angular version 4 now gives us a possibility to handle such scenario by assigning the async result from the Observable to a template variable"

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

Answer 2

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

Answer 3

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

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

尝试从我的 API Ionic 4 获取值时出现问题

Problem trying to get values from my API Ionic 4

ionic-framework

ionic4