如何在 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>

但我的基本问题是；

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

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 以调用将执行此操作的函数，因此当您单击/点击该图像时，它会将 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