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.Angular2 dart ngFür die Aktualisierung der Ansicht bei Verwendung von WebSockets
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.