Dom没有更新新数据

我正在尝试使用websocket建立一个简单的通知系统。Dom没有更新新数据

我有我的WebSocket服务：

import {Injectable} from '@angular/core'; 
import {Observable, Observer, Subject} from 'rxjs/Rx' 

@Injectable() 
export class WebSocketService { 
    private socket: Subject<MessageEvent>; 

    public connect(url): Subject<MessageEvent> { 
    if (!this.socket) { 
     this.socket = this.create(url); 
    } 
    return this.socket; 
    } 

    private create(url): Subject<MessageEvent> { 
    let ws = new WebSocket(url); 
    let observable = Observable.create(
     (obs: Observer<MessageEvent>) => { 
     ws.onmessage = obs.next.bind(obs); 
     ws.onerror = obs.error.bind(obs); 
     ws.onclose = obs.complete.bind(obs); 
     return ws.close.bind(ws); 
     } 
    ); 
    let observer = { 
     next: (data: Object) => { 
     if (ws.readyState === WebSocket.OPEN) { 
      ws.send(JSON.stringify(data)); 
     } 
     }, 
    }; 
    return Subject.create(observer, observable); 
    } 
}

通知服务包含了通知：

import {Injectable} from '@angular/core'; 
import {Subject} from 'rxjs/Rx' 
import {WebSocketService} from "./websocket.service"; 

@Injectable() 
export class NotificationService { 
    public messages: Subject<Object>; 

    constructor(wsService: WebSocketService) { 
    let notificationUrl = `ws://localhost:4969/Notification`; 
    this.messages = <Subject<Object>>wsService 
     .connect(notificationUrl) 
     .map((response: MessageEvent): Object => { 
     return JSON.parse(response.data); 
     }); 
    } 
}

其订阅服务的通知主题的组件：

import {Component, OnInit, ElementRef} from '@angular/core'; 
import {Notification} from "./notification"; 
import {NotificationService} from "../../services/notification.service"; 

@Component({ 
    selector: 'notifier', 
    templateUrl: 'notifier.component.html', 
    styleUrls: ['notifier.component.css'], 
    host: { 
    '(document:click)': 'onClickedOutside($event)', 
    }, 
}) 
export class NotifierComponent implements OnInit { 
    notifications: Notification[] =[]; 

    constructor(private elementRef: ElementRef, private notificationService: NotificationService) { 
    } 


    ngOnInit() { 
    this.notificationService.messages.subscribe(notification => { 
     let not = new Notification(notification.title, notification.notificationTypes, notification.data); 
     console.log(not); 

     let index = this.notifications.findIndex(x=>x.title == not.title); 
     if (index ==-1) { 
     this.notifications.push(not); 
     } 
     else { 
     this.notifications[index].data.progress=not.data.progress; 
     } 
     console.log(this.notifications) 
    }); 
    } 

}

所以我websocket服务器发送可以通过标题唯一标识的通知。如果标题已经存在于我的通知数组中，我更新了它的进度，否则我会推送它。

除了一件事以外，一切正常。我的视图不会更新每个通知更新，但如果我点击任何地方，点击事件将重新呈现，并且我会看到进度上升。

我已经阅读了一些关于Angular2如何传播数据的文章，并且从我的阅读中了解到，当您订阅某个主题并且它的数据发生变化时，它应该激发一个事件来重新呈现，但显然不是这里的情况。

我错过了什么？（目前使用Angular2.0.0-rc.5）

来源

2016-09-24 Yann Thibodeau

我“已经能够用这个问题的帮助下，解决了我的问题：How to force a component's re-rendering in Angular 2?

对于这里进一步参考是我在订阅添加的确切的行我的组件的功能：

this.applicationRef.tick();

来源

2016-09-24 21:39:25

Dom没有更新新数据

回答

相关问题