如何在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中显示夏洛特城市的信息，或者如果我点击罗利市的图片，我想在城市中显示信息.html

如果有人可以帮助我取得成功，那么任何帮助都会受到赞赏。我无法做到这一点。

谢谢大家。

Answer 1

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

修改城市图形html以调用一个能够执行此操作的功能，因此当您单击/点击该图像时，它会将您的foreach的当前项目传递给将要执行此操作的函数。工作，像这样：

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

在你的Home.ts中创建该功能，然后使用navController按城市信息推送城市页面。

//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
}

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

<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>

只需使用您的城市信息填充您的city.html

即可

{{1}}

希望它有所帮助：D