1

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.

yamamoto585
  • 381
  • 1
  • 6
  • 16

3 Answers3

5

Please make sure item.outputProjection is not undefined.

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

Dinh Duong
  • 297
  • 2
  • 10
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!

yamamoto585
  • 381
  • 1
  • 6
  • 16
1

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.