Как я могу отображать детали firebase на отдельной странице в Angularfire2

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 или если я нажимаю изображение города Raleigh, я хочу, чтобы отобразить информацию в городе.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