Angular 2 view is not updating when variable is changed in ts

Question

Can you please tell me why my value in the html does not change when my variable gets updated? This is my code in the ts

private peer: any;
private anotherId: 'opopo'
public myPeerId: '123456';
ngOnInit(): void {
    this.peer = new Peer();

    this.peer.on('open', function (connectionId) {
      this.myPeerId = connectionId;
      console.log(this.myPeerId)
    });
  }

I can log my variable value when it changes but somehow, my html does not. Please see my html code

<h1>My id - {{myPeerId}}</h1>
<input type="text" [(ngModel)]="anotherId" >
<button (click)="connect()">Connect</button>

Thank you.

Barremian · Accepted Answer · 2020-06-25 12:24:48Z

1

If you look at the console, you will see an error similar to

Cannot read property 'myPeerId' of undefined

To refer to the class scope using this keyword in callbacks, use arrow function notation

this.peer.on('open', (connectionId) => {     // <-- arrow notation here
  this.myPeerId = connectionId;
  console.log(this.myPeerId)
});

answered Jun 25, 2020 at 12:24

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 view is not updating when variable is changed in ts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related