Asyn c данные на дочернюю страницу с Ionic5 - PullRequest
Новая
       6

Asyn c данные на дочернюю страницу с Ionic5

0 голосов
/ 28 февраля 2020

Я пытаюсь передать данные между родительской и дочерней страницей в ioni c, используя Ioni c Storage, чтобы получить данные асинхронным c способом.

Что происходит, что когда я попадаю на страницу, данные еще не возвращаются из хранилища, и у меня возникает неопределенная ошибка: ОШИБКА TypeError: Невозможно прочитать свойство 'name' из undefined.

Что я использую:

  • Родительская страница, на которой я щелкаю элемент в сетке, и он перенаправляет меня на дочернюю страницу, используя 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 на дочерней странице конструктора и использую сервис для получения данных от ioni c хранилище. 
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 это сразу после t он. Тогда и данные есть, так что я предполагаю, что это просто классическая c асин c ситуация.

Я видел, что могу представить загрузочный компонент, заставить его отображаться в течение 1 секунды или немного больше, и тогда будут данные, но разве это лучший / официальный способ сделать это?

Я нахожусь в начале моего пути с ionic / asyn c, так что прости меня, если я совершил глупую ошибку

1 Ответ

1 голос
/ 28 февраля 2020

попробуйте это:

ts файл: 

public media: any = {}

html: 

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