angular2 Error TypeError Cannot read property of undefined

Question

I have attached the plunker of my angular2 code piece  I want to print a field from my JSON but unable to print that as initially my Object is null and it is being populated via a Promise   This is my component file  import  Component  NgModule  OnInit  from   angular core  import  BrowserModule  from   angular platform-browser   class MyData     xyz   MySubData     class MySubData     name   string      Component     selector   my-app     template         lt div gt         lt h2 gt Hello   name   lt  h2 gt           abc xyz name        lt  div gt          export class App implements OnInit     abc   MyData   null    constructor         this name    Angular2         ngOnInit         setTimeout      gt          this abc   new MyData          this abc xyz   new MySubData          this abc xyz name    Binita          2000           NgModule     imports    BrowserModule      declarations    App      bootstrap    App      export class AppModule      When I am removing the line   abc xyz name   from my template it is running fine   I have use set time out in my code because I am getting my data from Promise  i e asynchronous call    I can understand initially as abc is null  my code is unable to find abc xyz name  But I don t want to put any if condition to check  Because I have several property inside a JSON and it is not possible for each property to write if condition   Earlier in angularjs 1 if abc is null then it would automatically replace it with blank string  I want to do the same thing in angular2  Please suggest   Below is the plunker  https   plnkr co edit u1NqNF0penz7OS55QmoU p preview

User · Answer

Safe navigation operator or Existential Operator or Null Propagation Operator is supported in Angular Template. Suppose you have Component class

  myObj:any = {
    doSomething: function () { console.log('doing something'); return 'doing something'; },
  };
  myArray:any;
  constructor() { }

  ngOnInit() {
    this.myArray = [this.myObj];
  }

You can use it in template html file as following:

<div>test-1: {{  myObj?.doSomething()}}</div>
<div>test-2: {{  myArray[0].doSomething()}}</div>
<div>test-3: {{  myArray[2]?.doSomething()}}</div>

User · Answer

That s because abc is undefined at the moment of the template rendering  You can use safe navigation operator     to  protect  template until HTTP call is completed     abc  xyz  name     You can read more about safe navigation operator here   Update   Safe navigation operator can t be used in arrays  you will have to take advantage of NgIf directive to overcome this problem    lt div  ngIf  arr  amp  amp  arr length  gt  0  gt        arr 0  name    lt  div gt    Read more about NgIf directive here

[angular] angular2: Error: TypeError: Cannot read property '...' of undefined

Examples related to angular

Examples related to angular2-template

Examples related to 2-way-object-databinding