用Ionic5异步数据到子页面

Question

我正在尝试使用ionic存储在一个父页面和一个子页面之间传递数据，以便以异步方式获取数据。

正在发生的情况是，当我到达页面时，数据还没有从存储区返回，而且我有一个未定义的错误: ERROR TypeError:无法读取未定义属性的“名称”。

我用的是：

在网格中的一个项目中单击的父页面，它使用router.navigate将我转发到子页面

  goToMediaDetails(data) {
    this.router.navigate([`slate-list/${data.id}`]);
  }

• 子路由列在app-routing.module.ts中，接收id

  {
    path: "slate-list/:mediaId",
    loadChildren: () =>
      import("./pages/slate-list/slate-list.module").then(
        m => m.SlateListPageModule
      )
  }

• 我在子构造函数页面中获取mediaId，并使用服务从离子存储获取数据.

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";

//Services
import { MediaService } from "../../services/media.service";

@Component({
  selector: "app-slate-list",
  templateUrl: "./slate-list.page.html",
  styleUrls: ["./slate-list.page.scss"]
})
export class SlateListPage implements OnInit {
  public media: any;
  private mediaId: number;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private mediaSvc: MediaService
  ) {
    //if the id is provided in the url, get the media by id using the service
    if (route.snapshot.params.mediaId) {
      this.mediaId = route.snapshot.params.mediaId;
      this.mediaSvc.getMediaById(this.mediaId).then(result => {
        this.media = result;
      });
    }
  }

• 这里是返回承诺

的服务代码

  //GET Media By ID
  getMediaById(mediaId) {
    let mediaToReturn = new Media();
    return new Promise(resolve => {
      this.storage.get("media").then(result => {
        if (result != null && result.length != 0) {
          mediaToReturn = result.find(x => x.id == mediaId);
        }

        resolve(mediaToReturn);
      });
    });
  }

• 这里是简单的html，给出了问题

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      Slates for <strong>{{media.name}} </strong> / Episode: {{media.episode}}
    </ion-row>
  </ion-grid>
</ion-content>

是的，数据是使用服务返回的，我就在console.log之后返回数据，所以我假设这只是典型的异步情况。

我看到我可以引入一个加载组件，让它显示1秒或更多一点，然后数据就会出现，但是这是更好的/官方的方法吗？

我正处于离子/异步的旅程开始，所以如果我犯了一些愚蠢的错误，请原谅我

Answer 1

试试这个：

ts文件：

public media: any = {}

html：

Slates for <strong>{{media?.name}} </strong> / Episode: {{media?.episode}}