Can not update HTML using window setInterval

Question

Hello i am trying to update a HTML value based on the current Date. What i am doing is declare a variable inside my component and update it in the handler argument of window.setInterval.

I have tried both with my variable as a string and thinking it might be a closure problem i wrapped it in an object to no avail.My component variable gets updated (i print it in the console) but it does not update in the HTML.

Component

export class AppComponent {
  title = 'quickapp';

  public date:string;
  private subr:number;

private onTime(){
    this.date=new Date().getTime().toString()

    console.log("Date="+this.date);
 }

 ngOnInit(): void {
    this.subr=window.setInterval(this.onTime,2000);

 }
}

HTML

<p>{{this.date}}</p>

P.S: The console.log line works and the date seems to be updating.Why do i not see anything in the HTML?

Console Output

 Date=1542120062788
 Date=1542120064788
 Date=1542120066788

Have you tried `window.setInterval(() => this.onTime(),2000);`? — Titian Cernicova-Dragomir, Nov 13 '18 at 14:42
It worked with `() =>` sorry ! But why did it work with `lambda` and not with `point-free-notation` or `function() { } ` ? — Bercovici Adrian, Nov 13 '18 at 14:46
Because `()=>` captures `this` from declaration context. the others versions do not, and have `this` determined by the caller (and in this case the caller would not have passed the component as `this`) — Titian Cernicova-Dragomir, Nov 13 '18 at 14:48
You should delete the question .. it's a duplicate .. I'll try to find a duplicate of it .. — Titian Cernicova-Dragomir, Nov 13 '18 at 14:48
But i have also tried `wrapping` my `string` in an object and used that object...isn't it passed by reference ? Shouldn't it save the inner values from one call to another ? — Bercovici Adrian, Nov 13 '18 at 14:49

Can not update HTML using window setInterval

0 Answers0