Angular2 dart ngFür die Aktualisierung der Ansicht bei Verwendung von WebSockets

Question

Ich habe ein Problem mit einer angular2-Komponente. Die Ansicht wird nicht aktualisiert, wenn ich Websockets verwende. Ich habe versucht mit http Anfragen und es funktioniert gut, aber ich muss die Daten in der Ansicht aktualisiert halten.

Ich kann mit dem Server nur gut mit Websockets verbinden und ich kann die Daten empfangen, aber meine Ansicht wird nicht aktualisiert.

@Component(
    selector: "pv-table", 
    templateUrl: "./table.component.html" 
) 

class TableComponent 
{ 
    WebSocket _connection; 

    // NgZone _zone; 
    // ApplicationRef _application_ref; 

    List data; 

    TableComponent(/* this._zone, this._application_ref */) 
    { 
    _connection = new WebSocket("ws://${HOST}:${PORT}"); 

    _connection.onOpen.first.then((_) { 
     _connection.onMessage.listen((MessageEvent e) => OnMessage(e.data)); 

     // A simple class that gives my application a standard 
     // way to communicate. 
     Packet request = new Packet() 
     ..message = "table.get" 
     ..data = {}; 

     _connection.send(JSON.encode(request)); 

     _connection.onClose.first.then((_) { }); 
    }); 
    } 

    void OnMessage(String data) 
    { 
    Map res = JSON.decode(data); 
    String cmd = res[ "message" ]; 

    Log.Info(cmd); 

    switch(cmd) 
    { 
     case "table.send": 
     // Setting the data here. This works 
     data = res[ "data" ]; 

     // This prints the correct data in the developer console. 
     Log.Info(data); 

     // Neither of these help. 
     // _zone.run(() => data = res[ "data" ]); 
     // or 
     // _application_ref.tick(); 

     break; 

     default: 
     Log.Warn("Unknown command: $cmd"); 
     break; 
    } 
    } 
} 

Ich habe gegoogelt um und einige Probleme wie diese, wo zwingt Änderung decection mit NgZone.run(...) oder ApplicationRef.tick() gesehen, aber das half nicht. Entweder arbeiten sie nicht für diese Situation oder ich weiß nicht, wie ich sie benutzen soll.

Meine Vorlage sieht wie folgt aus:

<p *ngFor="let person of data"> 
    <span scope="row">{{ person[ "_id" ] }}</span> 
    <span>{{ person[ "name" ] }}</span> 
    <span>{{ person[ "job" ] }}</span> 
    <span>{{ person[ "date_due" ] }}</span> 
</p> 

als Kommentar erwähnt. Ich kann die Daten in der Entwicklerkonsole sehen. Es hat im richtigen Format eine Liste von Karten mit den richtigen Feldern, aber die Seite bleibt leer.

Answer 1

Es stellte sich heraus, dass ich nur wirklich, wirklich dumm war.

Werfen wir nur einen Blick auf ein paar Dinge sollen wir?

Die Signatur für die Methode, die eingehenden Daten verarbeitet: void OnMessage(String data)

Das Mitglied, das ich in der Vorlage zu verwenden, versuchen: List data;

Die Zuordnung innerhalb der OnMessage Methode: data = res[ "data" ];

Beachten Sie etwas seltsam? Vielleicht, dass das Klassenmitglied und der Methodenparameter denselben Namen haben? Vielleicht bedeutet das, dass der Parameter das Mitglied schattiert? Vielleicht bedeutet das, dass eine Zuweisung zu diesem Namen tatsächlich auf den Parameter und nicht das Mitglied?

Das Schlimmste ist, dass ich hier seit fast zwei Stunden saß und versuchte herauszufinden, was das Problem war.

Ändern zwei Linien und alles funktioniert

• void OnMessage(String data) =>void OnMessage(String response_data)
• Map res = JSON.decode(data); =>Map res = JSON.decode(response_data);