在刷新7角表datatables.net数据不断从表中的第一个装载旧数据的副本(Refreshing

I'm trying to make a live reporting from a REST API request using the datatables.net library in Angular 7. If I make a data update into the database, the data in the table is updated. However, If I touch the table (i.e. reorder, search for something, change the page, etc), on data reloading (which occurs every 5 seconds), in the table is added the data from the first load of the table. If I touch the table again, the updated data disappears, and only the old data remains, until the next data update, when the new data is added again in the table.

This is the state of the table when the page loads

This is the state of the table when the data in the database is updated

This is the behavior of the table when any change is made on the table (i.e. sort, search, switch page, etc)

This is the code for the component:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DownloadService } from '../services/download/download.service';
import { stringify } from 'querystring';
import { Router } from '@angular/router';

@Component({
  selector: 'app-downloads',
  templateUrl: './downloads.component.html',
  styleUrls: ['./downloads.component.css']
})

export class DownloadsComponent implements OnInit {

  downloadData$: any[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  interval: any;

  constructor(private http: HttpClient, private data: DownloadService, private router: Router) { }

  ngOnInit() {
    this.dtOptions = {
      responsive: true
    };

    this.data.GetDownloads().subscribe(data => {
      this.downloadData$ = data;
      this.dtTrigger.next();
    });

    this.interval = setInterval(() => {
      this.refreshData();
    }, 5000);
  }

  refreshData() {
    this.data.GetDownloads().subscribe(data => {
      this.downloadData$ = data;
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

and this is the html file

<div>
  <table style="text-align: center;" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"
    datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
    <thead>
      <tr>
        <th>Logger Name</th>
        <th>Progress</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let download of downloadData$">
        <td>{{ download.logger.name }}</td>
        <td [attr.data-order]="download.progress"><progress [attr.value]="download.progress" max="100"></progress>
          {{ download.progress }}%</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1:

你必须首先破坏表和重新渲染。您可以参考文章在这里。的代码段，如果链接在将来被禁用。

rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  // Destroy the table first
  dtInstance.destroy();
  // Call the dtTrigger to rerender again
  this.dtTrigger.next();
});
}

另一个解决方案是如所讨论的这里

或者让我知道，如果这个解决方案工作，如果您有任何疑问。

Answer 2:

我尝试过了，这行为是非常奇怪的，则默认回原来的值。这是不是与你的代码，而是有角的数据表库中的问题。

对于同时降级到angular-datatables@6.0.0使用

npm install --save angular-datatables@6.0.0或yarn add angular-datatables@6.0.0

我尝试过了，它工作正常。