Angular 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 不对应于组件的实例...

有关箭头函数的词法 this 的更多提示，请参阅此 link：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

Angular 2 组件更新视图属性更改

Angular 2 update view on component property change

angular

typescript

angular2-services

Angular 2 组件更新视图 属性 更改

Angular 2 update view on component property change

angular

typescript

angular2-services

Angular 2 组件更新视图属性更改