如何在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'); 
    } 

} 

我列出了在主頁的電網火力的項目。

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]），當我在電網在Home.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顯示夏洛特市的信息，或者如果我點擊羅利市的照片，我想顯示的信息in 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); 
} 

在citypage

，抓住與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