Angular2 dart ngДля обновления изображения при использовании WebSockets

Question

У меня возникла проблема с компонентом angle2. Когда я использую websockets, представление не обновляется. Я пробовал с http-запросами, и он отлично работает, но мне нужно сохранить данные в обновленном представлении.

Я могу подключиться к серверу просто с помощью websockets, и я могу получить данные, но мое представление не обновляется.

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

Я гугл вокруг и видел некоторые проблемы, как это, где принуждая изменения decection с NgZone.run(...) или ApplicationRef.tick(), но это не помогло. Либо они не работают для этой ситуации, либо я не знаю, как их использовать.

Мой шаблон выглядит следующим образом:

<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> 

Как комментарий упоминает. Я вижу данные, которые печатаются в консоли разработчика. Он находится в правильном формате, список карт с правильными полями, но страница остается пустой.

Answer 1

Оказывается, я просто был действительно, действительно глупым.

Давайте просто взглянем на несколько вещей, мы должны?

Сигнатура метода, который обрабатывает входящие данные: void OnMessage(String data)

член, что я пытаюсь использовать в шаблоне: List data;

Назначение внутри метода OnMessage: data = res[ "data" ];

Обратите внимание на что-нибудь странное? Возможно, что член класса и параметр метода имеют одно и то же имя? Возможно, это означает, что параметр затеняет элемент? Возможно, это означает, что присвоение этому имени фактически относится к параметру, а не к члену?

Худшая часть: я сидел здесь почти два часа, пытаясь выяснить, в чем проблема.

Изменение две строки и все работает

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