Angular Manipulate Collection

Question

我是棱角分明的新人。我的背景是.NET（c＃，wpf）。

我想要实现的是拥有一个绑定到表（datagrid）的Collection。

集合（EventData []）将由http get请求（getEvents）填充。

现在正在努力。

接下来，我使用SignalR库来获取服务器推送的新EventData对象。

因此，如果收到新的EventData，则应将该数据添加到现有集合中，并应反映到视图中。

在c＃中，它将是一个简单的“添加”，如“myEvents.Add（receivedEvent）”。

这是我的代码：

dataSource: EventData[];

ngOnInit() {

  this._hubconnection = new signalR.HubConnectionBuilder()
    .configureLogging(signalR.LogLevel.Trace)
    .withUrl('https://localhost:44373/notify')
    .build();

  this._hubconnection
    .start()
    .then(() => console.log('Connection Started'))
    .catch(err => console.log('Error while establishing connection'));

  this._hubconnection.on('BroadcastMessage', (data: EventData) => {
    console.log(data);
    this.dataSource.push(data);
    // this.dataSource.subscribe(v => v.push(data));
  });

}

datasource是eventData集合。

Answer 1

你必须更新你的MatTableDataSource以及EventData[];。为了展示这一点，我为您创建了一个示例StackBlitz Project。

正如你所看到的，顶部有一个按钮，上面写着Add Item。单击该按钮可向表中添加新项。

更新用户列表后，我将表数据源设置为新列表，如下所示：

this.dataSource = new MatTableDataSource(this.users);