[英]Angular 2 - Uncaught (in promise): TypeError: Cannot read property 'title' of undefined
I see this error in my App when I try to add some text input field with dual binding: 当我尝试添加带有双重绑定的文本输入字段时,我在我的应用程序中看到此错误:
ERROR 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/TapesComponent.ngfactory.js:660:29)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12658:21)
at checkAndUpdateView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12037:14)
at callViewAction (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12347:17)
at execComponentViewsAction (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12293:13)
at checkAndUpdateView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12038:5)
at callWithDebugContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:13020:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12560:12)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:10129:63)
at RouterOutlet.activateWith (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:5378:42)
at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4558:16)
at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4539:26)
at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:58)
at Array.forEach (native)
at ActivateRoutes.activateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:29)
at Object.eval [as updateRenderer] (ng:///AppModule/TapesComponent.ngfactory.js:660:29)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12658:21)
at checkAndUpdateView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12037:14)
at callViewAction (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12347:17)
at execComponentViewsAction (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12293:13)
at checkAndUpdateView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12038:5)
at callWithDebugContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:13020:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12560:12)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:10129:63)
at RouterOutlet.activateWith (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:5378:42)
at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4558:16)
at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4539:26)
at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:58)
at Array.forEach (native)
at ActivateRoutes.activateChildRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:4475:29)
at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:712:31) [angular]
at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:683:17) [angular]
at http://localhost:3000/node_modules/zone.js/dist/zone.js:760:17 [angular]
at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4123:37) [angular]
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:397:36) [angular]
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:165:47) [<root> => angular]
at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:593:35) [<root>]
at HTMLAnchorElement.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:464:25) [<root>]
I have this Tape class: 我有这个Tape类:
export class Tape {
constructor (
public id: number,
public title: string,
public date?: string,
public rating?: number,
public description?: string,
public photo?: string){}
}
And component 和组件
import { Component, OnInit } from '@angular/core';
import { Tape } from './tape'
import { TapeService } from './tape.service';
import { Router } from '@angular/router';
// import { TitlePipe } from './titleFilter';
@Component({
selector: 'my-tapes',
templateUrl: './tapes.component.html',
styleUrls: [`./tapes.component.css`],
providers: [TapeService],
})
export class TapesComponent implements OnInit {
pageName = 'VHS Movies listing';
tapes: Tape[];
selectedTape: Tape;
model = new Tape(0,'s','s',0,'s','sS');
Component HTML looks like 组件HTML看起来像
<div class="form-group">
<label for="title">Title{{model.title}}</label>
<input type="text" class="form-control" id="title" required [(ngModel)]="model.title" name="title" #title="ngModel"> Written text: {{tape.title}}
<div [hidden]="title.valid || title.pristine" class="alert alert-danger">
Title is mandatory
</div>
</div>
I just started learning Angular 2, but for me it should get title from module. 我刚刚开始学习Angular 2,但对我来说,它应该从模块中获得标题。 He he can't read title?
他他看不懂标题吗?
尝试使用safe /elvis
运算符检查值是否存在,然后显示,
<input type="text" class="form-control" id="title" required [(ngModel)]="model?.title" name="title" #title="ngModel"> Written text: {{model?.title}}
Rather than using the Elvis operator, what I did was to define the object as an empty one at first then assigning the needed value via service call. 我没有使用Elvis运算符,而是先将对象定义为空对象,然后通过服务调用分配所需的值。
model = <model>{}
//here goes service call
You are right: 你是对的:
Written text: {{tape.title}}
should be 应该
Written text: {{module.title}}
Stupid mistake! 愚蠢的错误! Thank you!
谢谢!
Same problem comes when I was using so I give different name like in [(ngModel)]="pranav"
instead of model.pranav
. 当我使用时
[(ngModel)]="pranav"
出现同样的问题,所以我给了类似[(ngModel)]="pranav"
而不是model.pranav
。 then the problem was solved. 然后问题解决了。
use different name in ngModel and #name otherwise it creates ambiguity 在ngModel和#name中使用不同的名称,否则会产生歧义
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.