Javascript-Ionic 3和Angular 4-未捕获(承诺)：TypeError：无法读取未定义的属性“ title”
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript-Ionic 3和Angular 4-未捕获(承诺)：TypeError：无法读取未定义的属性“ title”，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5659字，纯文字阅读大概需要9分钟。
内容图文
我真的对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>
<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>
解决方法:
在详细信息页面中,明确分配属性
constructor(public navCtrl: NavController, public params: NavParams) {
this.item = {
title: params.get('item');
}
}
要么
采用 ？类型安全的运算符
<ion-title>{{item?.title}}</ion-title>
内容总结
以上是互联网集市为您收集整理的Javascript-Ionic 3和Angular 4-未捕获(承诺)：TypeError：无法读取未定义的属性“ title”全部内容，希望文章能够帮你解决Javascript-Ionic 3和Angular 4-未捕获(承诺)：TypeError：无法读取未定义的属性“ title”所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】