Javascript 如何在Angularfire[已回答]中的单独页面中显示firebase详细信息

您好，我想将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/******"
      }

folder.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');
  }

}

试试这个

FolderPage

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

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

folder.page.html

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

试试这个

FolderPage

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

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

folder.page.html

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

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