从websocket接收到的数据的角度更新模板

问题描述

我有一个侦听 Websocket 服务的组件，它发生在ngAfterViewInit上，如下所示：

this.store.select(state => state.drifts.drifts)
  .pipe(takeUntil(this.componentDestroyed$))
  .subscribe(data => 
   this.currentDrifts = data
  )

我将模板中的一个函数传递给ngClass，然后使用局部变量(this.currentDrifts)做出相应的反应：

// Just some object fields,don't mind the naming as it's just for presenting multiple conditions
const servicesDrifts: object = this.currentDrifts[account_id]["service_drifts"];
const accountDrifts: object = this.currentDrifts[account_id]["account_drifts"];

if (Object.keys(servicesDrifts).length) {
  return 'services-drift-spotted';
} else if (Object.keys(accountDrifts).length) {
  return 'accounts-drift-spotted';
} else {
  return 'no-drifts';
}

模板（基本上是表格行，我更改了背景色）：

        <tr 
            mat-header-row 
            *matHeaderRowDef="displayedColumns"
        >
            
        </tr>
        <tr
            mat-row
            style="cursor: pointer"
            [ngClass]="row.account_id && detectAccountDrift(row.account_id)"
            (click)="onRowClick(row)"
            *matRowDef="let row; columns: displayedColumns;"
        >
        </tr>

我的问题是，如何确保在初始化组件后ngClass内的函数基本上在从Websocket收到的每条消息上都触发？

我认为我正在React中寻找useEffect(cb,['arg1'])之类的东西，您可以在其中传递变量以跟踪更改。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）