javascript - 如何在 Angularfire Ionic 的单独页面中显示 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/******"
}
文件夹.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)
解决方案
尝试这个
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");
}
推荐阅读
- c# - 如何使用鼠标将选定的游戏对象移动到某个位置
- java - 父实体的多次保存为 JPA 中的 ElementCollection 生成多个条目
- javascript - 添加新行时下拉搜索不起作用
- bash - 从网络适配器列表中读取的 OSX Shell 脚本?
- cucumber - TestNG Appium 并行执行不起作用
- python - 从 Tkinter 应用程序上的 Frame 和 mainloop 继承
- javascript - 单击按钮后页面已加载但显示白色空白屏幕(拒绝在框架中显示)-赛普拉斯
- javascript - 尝试将 HashMap 从 MVC 模型绑定到 JavaScript 变量
- java - 为什么我在使用正确的用户名和密码时在我的 jdbc java 代码中出现此错误?
- homebrew - 启动了 Grafana,但在 localhost:3000 没有日志或服务器?