如何在 Angular 中每 x 秒从 REST api 加载数据并更新 UI 而不会闪烁

我有一个棱角分明的应用程序，我想定期从后端获取数据，并在UI中显示更新.这是我的后端服务:

  // _backendService
  apiDashboardJobs(): Observable<any> {
    return this._httpClient.get<any>(`${environment.apiUrl}/api/dashboard/jobs`);
  }

我的组件代码:

      this.jobsOverview$ = interval(3000)
      .pipe(
        takeUntil(this.destroy$),
        switchMap(response => this._backendService.apiDashboardJobs()),
        map(response => 
          [
            {'status' :'Completed', 'number': response.completed, 'color': 'rgb(94,210,86)'},
            //...
          ]
        ));

    public trackByFn(index, item) {
      return index;
    }

    ngOnDestroy(): void {
      // Unsubscribe and complete the destroy$ subject
      this.destroy$.next();
      this.destroy$.complete();
    }

我的html代码:

                  <tr *ngFor="let job of jobsOverview$ | async; trackBy: trackByFn" style="height: 30px;">
                    <td>
                      <div style.background-color="{{job.color}}"> </div> 
                    </td>
                    <td>
                      {{job.status}}
                    </td>
                    <td>
                      {{job.number}}
                    </td>
                  </tr>

Now, this code seemed to work fine initially, but after some time the table does not render at all anymore and I see a bunch of these errors in the network tab:

有人能指导我如何解决这个问题吗？