Question

我遇到了angular2组件的问题。当我使用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;
    }
  }
}

我已经google了一下，看到了一些问题，例如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 ) =＆gt; void OnMessage( String response_data )
Map res = JSON.decode( data ); =＆gt; Map res = JSON.decode( response_data );

Angular2 dart ng使用WebSockets时不更新视图

1 个答案: