如何在 Angularfire Ionic 的单独页面中显示 Firebase 详细信息？

Question

我想将我的 firebase 数据从我的主页切换到模式，但我有一个错误，我无法更正它。

我想在主页上显示图像，然后单击模式打开以显示其余信息。

"samedi" : {
    "-123ZSpuULHPqAMsPc" : {
      "scene1" : {
        "artiste" : "abba",
        "edit1" : "Annulé",
        "edit2" : "Reporté",
        "edit3" : "En attente",
        "heure1" : "10h00",
        "heure2" : "12h00",
        "heure3" : "13h00",
        "heure4" : "14h00",
        "heure5" : "15h00",
        "image" : "https://firebasestorage.googleapis.com/******",
        "lieu1" : "12h00",
        "lieu2" : "10h00",
        "lieu3" : "10h00",
        "scene1" : "https://firebasestorage.googleapis.com/******",
        "scene2" : "https://firebasestorage.googleapis.com/******",
        "scene3" : "https://firebasestorage.googleapis.com/******"
      }

文件夹.page.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { ModalController } from '@ionic/angular';
import { ModalPopupPage } from '../modal-popup/modal-popup.page';

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
  public folder: string;

  itemValue = '';
  items: Observable<any[]>;
  navCtrl: any;
  ModalPopupPage: ModalPopupPage;

  constructor(
    public af: AngularFireDatabase,
    private activatedRoute: ActivatedRoute,
    public modalController: ModalController
  ) {
    this.items = af.list('samedi').valueChanges(); }

    async showModal() {
      const modal = await this.modalController.create({
        component: ModalPopupPage,
      });
      return await modal.present();
  }

  showSamedi(item) {
    this.navCtrl.push(ModalPopupPage, item);
  }

  ngOnInit() {
    this.folder = this.activatedRoute.snapshot.paramMap.get('id');
  }

}

文件夹.page.html

  <ion-item *ngFor="let item of items | async">
  <ion-card>
      <ion-card-header>
        <ion-button color="primary" (click)="showModal()">Show Modal</ion-button>
        <ion-label class="color-red artiste">
          {{ item.scene1.edit1 }}
        </ion-label>
        <ion-card-subtitle><img src="{{ item.scene1.image }}"/></ion-card-subtitle>
        <ion-card-title class="artiste">{{ item.scene1.artiste }}</ion-card-title>
        <ion-card-content>
          <!--1-->
          <ion-label class="scene">
            <a class="scene color-secondary" href="https://www.google.fr/maps/@{{ item.scene1.lieu1 }}" target=_blank><img src="{{ item.scene1.scene1 }}"/></a>
          </ion-label>
          <ion-label class="horaires">
            <a class="heure color-primary" href="https://calendar.google.com/calendar/r?cid=YzYzMzNobzRwcm44dm5zMjg1ajhibHBsOThAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ" target=_blank>
              {{ item.scene1.heure1 }} {{ item.scene1.heure2 }} {{ item.scene1.heure3 }} {{ item.scene1.heure4 }} {{ item.scene1.heure5 }} </a>
          </ion-label>
        </ion-card-content>
      </ion-card-header>
    </ion-card>
</ion-item>
</ion-content>

modal-popup.page.ts

import { Component, Input } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { ModalController, NavParams } from '@ionic/angular';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-modal-popup',
  templateUrl: './modal-popup.page.html',
  styleUrls: ['./modal-popup.page.scss'],
})

export class ModalPopupPage {
  @Input() name: string;

  itemValue = '';
  items: Observable<any[]>;
  dataReturned: any;
  modalTitle: string;
  modelId: number;
  samedi: any;

  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams,
    public db: AngularFireDatabase,
  ) { 
    console.log(navParams.get('name'));
    this.samedi = navParams.data;
  }

  public closeModal() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

  ngOnInit() {
    console.table(this.navParams);
    this.modelId = this.navParams.data.paramID;
    this.modalTitle = this.navParams.data.paramTitle;
  }

}

modal-popup.page.html

<ion-header>
  <ion-toolbar color="danger">
    <ion-title></ion-title>
    <ion-buttons slot="start">
      <ion-button ion-button (click)="closeModal()">Fermer</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding class="recipe">
  <p> {{ samedi.scene1.scene1 }} </p>
</ion-content>

安慰

ERROR TypeError: Cannot read property 'scene1' of undefined
    at ModalPopupPage_Template (template.html:11)
    at executeTemplate (core.js:7303)
    at refreshView (core.js:7172)
    at refreshComponent (core.js:8326)
    at refreshChildComponents (core.js:6965)
    at refreshView (core.js:7222)
    at renderComponentOrTemplate (core.js:7286)
    at tickRootContext (core.js:8498)
    at detectChangesInRootView (core.js:8523)
    at RootViewRef.detectChanges (core.js:9899)

Answer 1

尝试这个

FolderPage

async showModal(item) {
  const modal = await this.modalController.create({
    component: ModalPopupPage,
    componentProps: {
        'samedi': item
    }
  });
  return await modal.present();
}

folder.page.html

... 
<ion-button color="primary" (click)="showModal(item)">Show Modal</ion-button>
...

并在模态ModalPopupPage

constructor(
  private modalCtrl: ModalController,
  private navParams: NavParams,
  public db: AngularFireDatabase,
) { 
    console.log(navParams.get('name'));
    this.samedi = navParams.get("samedi");
}