data binding not working 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 commonService which use to transfer content from one Component to another Component.

above this._clickLectre.facultyname value printed on console but it is not reflected on html page

why data binding not working what is the problem?

Thanks in advance

_clickLectrehero does not appear to be declared or defined. — cartant
– cartant, Commented Jan 11, 2017 at 7:17
i am not using this '_clickLectrehero' variable I used _clickLectre which I declared already — User
– User, Commented Jan 11, 2017 at 7:19
How does your CommonService look like? Can you please try to add private changeDetectorRef:ChangeDetectorRef to the constructor parameters and call this.cdRef.detectChanges(); after this._clickLectre = res.item; — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 11, 2017 at 7:34

eko · Accepted Answer · 2017-01-11 07:30:41Z

4

Since _clickLectre is defined asynchronously you should use a safe navigation operator (?)

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

edited Jan 11, 2017 at 7:30

answered Jan 11, 2017 at 7:21

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

User Over a year ago

I changed check this _clickLectre in ng-if but not work

eko Over a year ago

@Pravin Are you putting the ? inside {{_clickLectre?.facultyname}}? Can you remove the ngIf and try that way?

omeralper · Accepted Answer · 2017-01-11 09:41:28Z

1

You can set your variable as empty object at initialization state.

_clickLectre = <any>{};

answered Jan 11, 2017 at 9:41

omeralper

10.2k3 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

data binding not working in angular2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related