javascript - Ionic 3 和 Angular 4 - 未捕获( promise 中): TypeError: Cannot read property 'title' of undefined

Question

我对 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)

堆栈

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

附加信息

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页面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>

Answer 1

在您的详细信息页面中，显式分配属性

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

或

使用 ? 类型安全运算符

<ion-title>{{item?.title}}</ion-title>