Vin Nwaikwu Vin Nwaikwu - 3 months ago 44
Javascript Question

Ionic 3 and Angular 4 - Uncaught (in promise): TypeError: Cannot read property 'title' of undefined

I am really new in both Angular and Ionic.
I am following a tutorial I found online to build a small app for training and testing purpose. However, in the tutorial Angular 2 was used.
I am using Angular 4 and Ionic 3.
Please, does anyone know why am getting the errors below? I also follow another tutorial and I am getting same type of error. Someone please help me.

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();
});
}
}


My details ts page details.ts (having errors)

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');

}

}


My details page html details.html (having errors)

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


My app page Vince.ts where I call list of data from Api (working fine)

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 (working fine)

<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 Source

In your details page, assign the property explicitly

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

or

Use ? type-safe operator

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