2017-01-08 5 views
0

私のホームページの私のリストのion-itemをクリックすると、新しいページ(DetailPage)にフィードのデータが表示されません。私が逃しているものを整理することはできません。私を助けてくれますか?イオンアイテムをクリックした後にフィードデータを表示できません - イオン2

スタック:これは

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

である私の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); 
    } 
} 
+0

すべてがOKです。あなたのコンソール出力は何ですか? –

+0

スタックエラーが発生しています – Rick

答えて

1

私はエントリはクラス内でスコープされていないからだと思います。それはコンストラクタ内でのみ有効です。 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); 
    } 
} 
+0

同じエラーが発生しました – Rick

+0

ああ、ごめんなさい!おそらくそれはthis.entry.titleでなければならないからです。 btwまだエラーが発生している場合は、コンソールにthis.entryログを記録できますか? の後に 'this.entry = navParams.get( 'selectedEntry');' –

+0

ちょうどいい!!ありがとうございます;) – Rick

関連する問題