使用 Ionic 5 将数据异步到子页面

Question

我正在尝试使用 Ionic Storage 在 ionic 中的父页面和子页面之间传递数据，以异步方式获取数据。

发生的事情是，当我到达页面时，数据还没有从存储中 return 并且我有一个未定义的错误：错误类型错误：无法读取属性 'name' 未定义。

我在用什么：

我在网格中单击一个项目的父页面，它将我转发到子页面，使用 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;
      });
    }
  }

这是服务代码return承诺

  //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>

是的，数据是使用该服务 return 编辑的，我 console.log 它紧接在 .then 之后并且数据就在那里，所以我假设这只是一个典型的异步情况.

我看到我可以引入一个加载组件，让它显示 1 秒或更多一点，然后数据就会在那里，但是 better/official 这样做的方法吗？

我正处于ionic/async旅程的开始，如果我犯了一些愚蠢的错误，请原谅我

Answer 1

试试这个：

ts 文件：

public media: any = {}

html:

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

使用 Ionic 5 将数据异步到子页面

Async data to child page with Ionic5

asynchronous

ionic-framework

ionic4

ionic5