Data binding does not work in angular2

Question

    @Component({
      selector: 'my-content',
      templateUrl: `./app/content/content.components.html`
    })
    export class ContentComponent  { 
      _clickLectre: any;
      _temoobj:any;
      private subscription: Subscription;
      constructor(private commonService: CommonService, private dataService: DataService ) {
      }
      ngOnInit() {               
        this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
          if (res.hasOwnProperty('option') && res.option === 'call_Lecture') {                         
                console.log("call"+res.items);            
                this._clickLectre=res.items;
                console.log("call"+this._clickLectre.facultyname);               
          }
        });
      }
      ngOnDestroy() {
        this.subscription.unsubscribe();
      }

    }

HTML

   <tr  *ngIf="_clickLectre">
    <td>Faculty Name : </td>
    <td>{{_clickLectre.facultyname}}</td>
    <td>X</td>
    <td>X</td>
    <td>End Time :</td>
    <td>X </td>
    <td> Present: </td>
    <td>X </td>
   </tr>

I used commonServicethat are used to transfer content from one component to another.

higher this._clickLectre.facultynamevalue printed on console but not reflected in html page

why data binding does not work, what is the problem?

Thanks in advance

Answer 1

Since it is _clickLectredefined asynchronously, you must use the safe navigation operator ( ?)

<td>{{_clickLectre?.facultyname}}</td>

Answer 2

You can set your variable as an empty object in initialization state.

_clickLectre = <any>{};