如何在 Angularfire2 的单独页面中显示 firebase 详细信息

Question

我有一个静态 firebase 数据库，其架构如下所示。这个截图只是其中的一小部分。我的数据库中列出了很多城市的基本信息。

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CityPage} from '../city/city';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  cityPage = CityPage;

  cityinfo: FirebaseListObservable<any>;

  constructor(public navCtrl: NavController, af: AngularFire) {
    this.cityinfo = af.database.list('/cityinfo');
  }

}

我在主页的网格中列出了 Firebase 项目。

home.html

  <div [navPush]="cityPage" class="demo-card-square mdl-card mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-shadow--2dp" *ngFor="let item of cityinfo | async">
    <figure class="mdl-card__media">
      <img src="{{ item.image }}" alt="" />
    </figure>
    {{ item.$key }}
  </div>

但我的根本问题是；

我想在单独的页面（城市页面 [ city.html ] 中）显示城市详细信息（摘要、地理、人口、邮政编码、图像）信息，当我在 [=43] 处单击网格中的图像时=]

city.html

<ion-content padding class="recipe">
    <p> {{ item.summary }} </p>
    <p> {{ item.geography }} </p>
    <p> {{ item.population }} </p>
    <p> {{ item.zipcode }} </p>
    <img src="{{ item.image }}">
</ion-content>

比如我在首页点击夏洛特市的图片，我想在city.html中显示夏洛特市的信息，或者如果我点击罗利市的图片，我想在city.html中显示信息

如果有人能帮助我成功，我们将不胜感激。我做不到。

谢谢大家。

Answer 1

您需要将城市信息作为参数传递给您的城市页面。

修改城市图 html 以调用将执行此操作的函数，因此当您 click/tap 该图像时，它会将您的 foreach 的当前项目传递给将执行此操作的函数像这样完成工作：

<div [navPush]="cityPage" class="demo-card-square mdl-card mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-shadow--2dp" *ngFor="let item of cityinfo | async">
  <figure class="mdl-card__media" (click)="showCityInfo(item)"> //CAN USE (tap) TOO.
    <img src="{{ item.image }}" alt="" />
  </figure>
  {{ item.$key }}
</div>

在您的 Home.ts 中创建该函数，并使用 navController 推送包含城市信息的城市页面。

showCityInfo(item) {
  this.navCtrl.push(CityPage, item);
}

在您的城市页面中，使用 navparams 获取城市信息并将其保存在变量中

//IMPORT NAVPARAMS FROM IONIC-ANGULAR
cityInfo: any;

constructor(public navPrms: NavParams){
  this.cityInfo = navPrms.data; //here you'll get the data you passed from your home.ts
}

只需在 city.html 中填写您的城市信息

<ion-content padding class="recipe">
  <p> {{ cityInfo.summary }} </p>
  <p> {{ cityInfo.geography }} </p>
  <p> {{ cityInfo.population }} </p>
  <p> {{ cityInfo.zipcode }} </p>
  <img src="{{ cityInfo.image }}">
</ion-content>

希望对你有帮助:D

如何在 Angularfire2 的单独页面中显示 firebase 详细信息

How can I display firebase details in a separate page in Angularfire2

firebase

angularfire

ionic-framework

ionic2

angularfire2