用 ionic 中的数组数据显示 Angular observable

Question

我正在使用 Angular 18 和 Ionic/Angular v8.0.0 独立组件：

我的服务：

getFinds(): Observable<Find[]> {
  return this.http.post<Find[]>(`${this.BASE_URL}/list`, {}).pipe(
    delay(500)
  );
}

我的 feed.component.ts

ngOnInit() {
 this.finds$ = this.findsService.getFinds();
}

和我的 feed.component.html

<ion-list>
  <ng-container *ngIf="(finds$ | async) as finds; else emptyState">
    <ion-item *ngFor="let item of finds" lines="none" class="ion-padding-bottom">
      <ion-label>{{item.note}}asdf</ion-label>
    </ion-item>
  </ng-container>
  <ng-template #emptyState>
    <ion-item lines="none" class="ion-padding-bottom">
      <ion-label>Nothing found</ion-label>
    </ion-item>
  </ng-template>
</ion-list>

该服务返回数据，如网络选项卡和 console.log 中所示，但数据未通过我的 html 组件文件显示。在网站上显示emptyState（没有找到）。我不确定我做错了什么，我想知道这是否是一个离子问题？

我希望看到查找结果数组显示为离子列表

Answer 1

您通常使用

this.http.get

获取数据，您可以使用

this.http.post

创建新数据，当您想要更新现有数据时，可以使用

this.http.put

。

getFinds(): Observable<Find[]> {
  return this.http.get<Find[]>(`${this.BASE_URL}/list`).pipe(
    delay(500)
  );
}