Ionic 3和Angular 4 - Uncaught（承诺）：TypeError：无法读取未定义的属性'title'

我是Angular和Ionic的新手 . 我正在按照我在网上找到的一个教程来构建一个用于培训和测试目的的小应用程序 . 但是，在教程中使用了Angular 2 . 我正在使用Angular 4和Ionic 3.请问，有谁知道为什么我会得到以下错误？我也遵循另一个教程，我得到相同类型的错误 . 有人请帮帮我 .

Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'title' of undefined 
TypeError: Cannot read property 'title' of undefined at Object.eval [as 
updateRenderer] (ng:///AppModule/DetailsPage.ngfactory.js:152:28) at 
Object.debugUpdateRenderer [as updateRenderer] 
(http://localhost:8100/build/main.js:13122:21) at checkAndUpdateView 
(http://localhost:8100/build/main.js:12427:14) at callViewAction 
(http://localhost:8100/build/main.js:12785:21) at execComponentViewsAction 
(http://localhost:8100/build/main.js:12717:13) at checkAndUpdateView 
(http://localhost:8100/build/main.js:12428:5) at callWithDebugContext 
(http://localhost:8100/build/main.js:13484:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] 
(http://localhost:8100/build/main.js:13024:12) at ViewRef_.detectChanges 
(http://localhost:8100/build/main.js:10496:63) at Tab.NavControllerBase._viewAttachToDOM 
(http://localhost:8100/build/main.js:44327:40)

Stack

Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined
TypeError: Cannot read property 'title' of undefined
at Object.eval [as updateRenderer] (ng:///AppModule/DetailsPage.ngfactory.js:152:28)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/main.js:13122:21)
at checkAndUpdateView (http://localhost:8100/build/main.js:12427:14)
at callViewAction (http://localhost:8100/build/main.js:12785:21)
at execComponentViewsAction (http://localhost:8100/build/main.js:12717:13)
at checkAndUpdateView (http://localhost:8100/build/main.js:12428:5)
at callWithDebugContext (http://localhost:8100/build/main.js:13484:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/main.js:13024:12)
at ViewRef_.detectChanges (http://localhost:8100/build/main.js:10496:63)
at Tab.NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:44327:40)
at c (http://localhost:8100/build/polyfills.js:3:13535)
at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:44060:16)
at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:44048:14)
at http://localhost:8100/build/main.js:44103:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
at Object.onInvoke (http://localhost:8100/build/main.js:4427:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
at r.run (http://localhost:8100/build/polyfills.js:3:4452)
at http://localhost:8100/build/polyfills.js:3:14076

Additional Info

Ionic Framework: 3.4.2
Ionic App Scripts: 1.3.7
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.0
OS Platform: Windows 10

App.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { VinceService } from "./services/vince.service";
import { TabsPage } from '../pages/tabs/tabs';

@Component({
templateUrl: 'app.html',
providers: [VinceService]
})
export class MyApp {
rootPage:any = TabsPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
SplashScreen) {
platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();
  splashScreen.hide();
});
}
}

我的详细信息ts page details.ts （有错误）

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

@Component({

templateUrl: 'details.html'
})
export class DetailsPage {
item:any

constructor(public navCtrl: NavController, public params: NavParams) {
this.item = params.get('item');

}

}

我的详细信息页面html details.html （有错误）

<ion-header>
<ion-navbar color="secondary">
    <ion-title>{{item.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Main Details</h2>
</ion-content>

我的应用页面 Vince.ts 我从Api调用数据列表（工作正常）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { VinceService } from "../../app/services/vince.service";
import { DetailsPage } from "../details/details";

@Component({
selector: 'vince',
templateUrl: 'vince.html'
})
export class VincePage {
items: any;
constructor(public navCtrl: NavController, private vinceSerivce:VinceService) {

}

ngOnInit(){
this.getPosts('sports', 10);
}

getPosts(category, limit){
this.vinceSerivce.getPosts(category, limit).subscribe(response => {
  this.items = response.data.children;
});
}

viewItem(item){
this.navCtrl.push(DetailsPage, {
  item:item
});

}

}

Vince.html （工作正常）

<ion-header>
<ion-navbar color="secondary">
    <ion-title>Vince-App</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<h2>Welcome to My app</h2>
<ion-list>
    <ion-item *ngFor="let item of items">

        <ion-thumbnail *ngIf="item.data.thumbnail" item-left>
            <img src={{item.data.thumbnail}}>
        </ion-thumbnail>

        <h2>{{item.data.title}}</h2>
        <p>
            <ion-icon name="thumbs-up">{{item.data.score}}</ion-icon> &nbsp; &nbsp;
            <ion-icon name="chatboxes">{{item.data.num_comments}}</ion-icon>
        </p>
        <button ion-button clear item-right (click)="viewItem (item.dat)">View</button>

    </ion-item>
</ion-list>