angular TypeError: Cannot read property of 'name' undefined

Question

I am working on a angular 2 release 6 app and on the following line of code :

<input #instance="ngbTypeahead" type="text" class="form-control" [(ngModel)]="item.outputProjection.name" [ngbTypeahead]="search" />

and I'm getting the following error:

DatacartComponent.html:60 ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateDirectives] (DatacartComponent.html:60)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
at checkAndUpdateView (core.js:11307)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)

and I'm not really sure what to do to better check object definitions on the bootstrap typeahead.

Possible duplicate of [Angular2: Cannot read property 'name' of undefined](https://stackoverflow.com/questions/39755336/angular2-cannot-read-property-name-of-undefined) — ConnorsFan, Jun 26 '18 at 03:09

score 5 · Accepted Answer · answered Jun 26 '18 at 01:45

5

Please make sure item.outputProjection is not undefined.

Workaround for you is define item.outputProjection = {} in your component .ts file.

answered Jun 26 '18 at 01:45

Dinh Duong

297
2
10

thank you, didn't even think of that. I also had to initialize name as well. – yamamoto585 Jun 26 '18 at 13:47

score 2 · Answer 2 · answered Jun 26 '18 at 15:55

2

unfortunately I could not add a elvis operator to a ngModel with 2 way binding so I did this and it worked.

[(ngModel)]="item && item.outputProjection && item.outputProjection.name"

And it worked!

answered Jun 26 '18 at 15:55

yamamoto585

381
1
6
16

score 1 · Answer 3 · answered Jun 26 '18 at 02:28

Can you try this.

<input #instance="ngbTypeahead" type="text" class="form-control" [(ngModel)]="item.outputProjection?.name" [ngbTypeahead]="search" />

item.outputProjection?.name will not throw undefined error, it will check for item.outputProjection is defined and if it is so, will fetch name from it.

angular TypeError: Cannot read property of 'name' undefined

3 Answers3