单击“离子项目”后无法显示提要数据-Ionic 2

Question

When I click on an ion-item of my list in my home page I'm not getting the data of the feed in the new page (DetailPage). I can't sort out what I'm missing, could you help me?

Stack:

Runtime Error
Error in ./DetailPage class DetailPage - caused by: Cannot read property 'title' of undefined

This is my home.html - home.ts

<ion-header>
    <ion-navbar color="primary">
        <ion-title text-center>
            App Name
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-list inset>
            <ion-item *ngFor="let entry of entries" (click)="openPage(entry)">{{entry.title}}</ion-item>
    </ion-list>
    </ion-list>
</ion-content>

|--------------------------------------------------------|

import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';
import { RssService } from '../../providers/rss-service/rss-service';
import { DetailPage } from '../detail-page/detail-page';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [RssService]
})
export class HomePage {

  public entries: any  = [];

  constructor(public rssService:RssService, public nav:NavController) {    
  }

  ionViewDidLoad(){
      this.rssService.load().subscribe(
          data => {
              this.entries.push(data);
          }
      );
  } 

  openPage(entry) {
      console.log('open page called with ' + entry.title);
      this.nav.push(DetailPage, {selectedEntry:entry});
  }

}

detail-page.html - detail-page.ts

<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{entry.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <!--<div [innerHTML]="entry.description"></div>-->
</ion-content>

|--------------------------------------------------|

import {NavController, NavParams} from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
    templateUrl: 'detail-page.html'
})
export class DetailPage {

    constructor(public nav: NavController, navParams:NavParams) {
        console.log('run');
        this.nav = nav;
        var entry = navParams.get('selectedEntry');
        console.log('my entry is '+ entry.title);
    }
}

Answer 1

I think it's because entry is not scoped within the class. It's only scoped within the constructor. Can you try this code instead for DetailPage?

import {NavController, NavParams} from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
    templateUrl: 'detail-page.html'
})
export class DetailPage {
    entry:any = {};
    constructor(public nav: NavController, navParams:NavParams) {
        console.log('run');
        this.nav = nav;
        this.entry = navParams.get('selectedEntry');
        console.log('my entry is '+ this.entry.title);
    }
}