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]）別のページにある都市の詳細（要約、地理、人口、郵便番号、画像）情報私は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を使用して、都市情報を都市ページにプッシュします。あなたのcitypageで

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

、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を移入変数

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

に保存：D