组件属性更改的角度2更新视图

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> 

在组元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。