websocket - 数据更新后 Angular2 View 没有改变

Question

我正在尝试在 websocket 事件返回更新数据后更新我的 View 。

我在我的应用程序中注入(inject)了一个服务并调用了该服务的 getData() 方法。此方法向我的 NodeJS 服务器发出一个 socket.io 事件，该服务器依次执行外部 api 调用并解析一些数据。然后，NodeJS 服务器使用我在服务中监听的新数据发出一个成功事件。当返回成功事件时，我会更新我在 View 中引用的服务的属性。

但是无论我尝试什么，我都无法在属性更新后显示数据。

我已经搜索了几天，我发现所有的博客文章都说这个变化应该是无缝的，或者我需要以某种方式合并 zone.js，或者使用表单尝试相同的逻辑(但是我试图在没有用户交互的情况下执行此操作)。似乎没有什么对我有用，我有点沮丧。

例如:

假设我收到一个字符串数组，我想用它来创建一个未排序的列表。

应用.ts

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {MyService} from 'js/services/MyService';

// Annotation section
@Component({
    selector: 'my-app',
    viewInjector: [MyService]
})
@View({
    templateUrl: 'templates/my-app.tpl.html',
    directives: [NgFor]
})

class MyComponent {
    mySvc:MyService;

    constructor(mySvc:MyService) {
        this.mySvc = mySvc;
        this.mySvc.getData();
    }
}   

bootstrap(MyComponent, [MyService]);

我的服务.ts

let socket = io();
export class MyService {
    someList:Array<string>;

    constructor() {
        this.initListeners();
    }

    getData() {
        socket.emit('myevent', {value: 'someValue'});
    }

    initListeners() {
        socket.on('success', (data) => {
            self.someList = data;
        });
    }
 }

我的应用程序.tpl.html

<div>
    <h2>My List</h2>
    <ul>
        <li *ng-for="#item of mySvc.myList">Item: {{item}}</li>
    </ul>
</div>

有趣的是，我发现如果我在我的组件中加入一个超时更新我在 someList 属性从成功回调更新后在 View 上设置的一些任意属性，那么两个属性值会同时正确更新.

例如:

新的 app.ts

    import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
    import {MyService} from 'js/services/MyService';

    // Annotation section
    @Component({
        selector: 'my-app',
        viewInjector: [MyService]
    })
    @View({
        templateUrl: 'templates/my-app.tpl.html',
        directives: [NgFor]
    })

    class MyComponent {
        mySvc:MyService;
        num:Number;

        constructor(mySvc:MyService) {
            this.mySvc = mySvc;
            this.mySvc.getData();
            setTimeout(() => this.updateNum(), 5000);
        }

        updateNum() {
            this.num = 123456;
        }
    }   

    bootstrap(MyComponent, [MyService]);

新的 my-app.tpl.html

<div>
    <h2>My List {{num}}</h2>
    <ul>
        <li *ng-for="#item of mySvc.myList">Item: {{item}}</li>
    </ul>
</div>

那么我应该如何让 angular2 识别数据在“成功”事件后发生了变化而不更新其他一些属性？

我在使用 NgFor 指令时遗漏了什么吗？

Answer 1

所以我终于找到了一个我喜欢的解决方案。按照这篇文章中的答案 How to update view after change in angular2 after google event listener fired我在 zone.run() 中更新了 myList，现在我的数据在我的 View 中按预期更新了。

我的服务.ts

/// <reference path="../../../typings/tsd.d.ts" />

// Import
import {NgZone} from 'angular2/angular2';
import {SocketService} from 'js/services/SocketService';

export class MyService {
    zone:NgZone;
    myList:Array<string> = [];
    socketSvc:SocketService;

    constructor() {
        this.zone = new NgZone({enableLongStackTrace: false});
        this.socketSvc = new SocketService();
        this.initListeners();
    }

    getData() {
        this.socketSvc.emit('event');
    }

    initListeners() {
        this.socketSvc.socket.on('success', (data) => {
            this.zone.run(() => {
                this.myList = data;
                console.log('Updated List: ', this.myList);
            });
        });
    }
 }