javascript - 如何在 Ionicframework 中输出异步/可观察数据？

Question

我正在 LinkedIn Learning 上关注本教程 https://www.linkedin.com/learning/ionic-4-0-essential-training/implementing-the-detail-page-design但我无法输出从 URL 获取的数据。

我已经尝试添加 *ngIf="(activityDetail | async)"并且它有效。但它显示无法读取null的属性'id'

这是我的 ActivityDetail View

 <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>ActivityDetail</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-card>
        <ion-header>
          <ion-card-title>Test {{(activityDetail | async).id}}</ion-card-title>
        </ion-header>
      </ion-card>
    </ion-content>

这是我的ActivityDetail.ts

export class ActivityDetailPage implements OnInit {
  activityDetail: Observable<Activity>

  constructor(activityService: ActivityService, activatedRoute: ActivatedRoute) {
    const activityID = activatedRoute.snapshot.params['activityID'];
    this.activityDetail = activityService.getActivity(activityID);
  }

  ngOnInit() {
  }

}

无法在我的控制台上读取 null 的属性“id”。我应该在我的 View 中输出我的事件的 ID。

Answer 1

{{(activityDetail | async)?.id}} 

由于您使用的是异步管道，所以可观察对象不完整，因此它正在寻找尚不存在的 attr id，使用 ?. 表示法进行可能的 null 检查