Angular 2 update view on change property change

Question

Я создал простую службу WebSocket и компонент, и у меня есть жесткое обновление, когда новые данные получены через websocket.

websocket.service.ts

import {Injectable} from "angular2/core"; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class WebsocketService { 

    observable: Observable; 
    websocket = new WebSocket('ws://angular.local:8080'); 

    constructor() { 
     this.observable = Observable.create(observer => 
      this.websocket.onmessage = (msg) => observer.next(msg); 
      this.websocket.onopen = (msg) => console.log('openned'); 

     ); 
    } 
} 

runner.component.ts

import {Component} from "angular2/core"; 
import {WebsocketService} from "./websocket.service"; 

@Component({ 
    selector: "runners-list", 
    templateUrl: "../partials/runners-list.html", 
    providers: [WebsocketService], 
    styleUrls: ["../css/app.css"] 
}) 

export class RunnerComponent { 

    output: any; 

    constructor(private _websocketService: WebsocketService) { 
     _websocketService.observable.subscribe(
      function onNext(data) { 
       this.output = data; 
       console.log(this.output); 
      }, 
      function onError(error) { 
       console.log(error); 
      }, 
      function onCompleted() { 
       console.log('completed'); 
     }); 
    } 
} 

бегуны list.html

<h1>{{output}}</h1> 

В componenet onNext метод успешно вызывается и консоль правильно печатает свежие данные, но просмотр не обновляется. Я даже пытался с ngZone, но без успеха.

Answer 1

Вы должны использовать функции стрелок для обратных вызовов, чтобы иметь возможность использовать лексический this:

constructor(private _websocketService: WebsocketService) { 
    _websocketService.observable.subscribe(
     (data) => { 
      this.output = data; 
      console.log(this.output); 
     }, 
     (error) => { 
      console.log(error); 
     }, 
     () => { 
      console.log('completed'); 
    }); 
} 

В вашем случае, this не соответствует экземпляру компонента ...

См эта ссылка для большего количества намеков на лексику этого функции стрелки: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.