Dom nicht auf neue Daten aktualisieren

Question

Ich versuche, ein einfaches Benachrichtigungssystem mit Websockets einzurichten.

Ich habe meine websocket Service:

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); 
    } 
} 

Der Benachrichtigungsdienst enthält die Meldungen:

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); 
     }); 
    } 
} 

Die Komponente, die an die Service-Benachrichtigungen Thema abonnieren:

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) 
    }); 
    } 

} 

Also meine websocket server sendet Benachrichtigungen, die durch seinen Titel eindeutig identifiziert werden können. Wenn der Titel bereits in meinem Benachrichtigungs-Array vorhanden ist, habe ich den Fortschritt aktualisiert, ansonsten drücke ich ihn.

Alles funktioniert gut außer einer Sache. Meine Ansicht wird nicht bei jeder Benachrichtigungsaktualisierung aktualisiert. Wenn ich jedoch auf eine beliebige Stelle klicke, wird das Klickereignis erneut gerendert und der Fortschritt wird angezeigt.

Ich habe ein paar Artikel darüber gelesen, wie Angular2 Daten verbreitet und aus meiner Lektüre habe ich gelernt, dass wenn Sie ein Thema abonnieren und es Daten ändert, sollte es ein Ereignis zum Rendern auslösen, aber das ist offensichtlich nicht der Fall hier.

Was fehlt mir? (Derzeit mit Angular2.0.0-rc.5)

Answer 1

I "ve der Lage gewesen, mein Problem mit Hilfe dieser Frage gelöst: How to force a component's re-rendering in Angular 2?

Für weitere Referenz hier ist die genaue Linie, die ich in der addierte abonnieren Funktion meiner Komponente:

this.applicationRef.tick();