在Angular 7中刷新datatables.net表数据可保留表第一次加载时的旧数据的副本 [英] Refreshing datatables.net table data in Angular 7 keeps a copy of the old data from table's first loading

问题描述

我正在尝试使用Angular 7中的datatables.net库根据REST API请求进行实时报告.如果我对数据库进行数据更新，则表中的数据将更新.但是，如果我触摸表(即重新排序，搜索内容，更改页面等)，则在数据重新加载时(每5秒发生一次)，表中的第一次加载就添加了数据.如果我再次触摸该表，则更新的数据将消失，仅保留旧数据，直到下一次数据更新时，才将新数据再次添加到表中.

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)

这是组件的代码:

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();
  }
}

这是html文件

<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>

推荐答案

您必须先销毁表并重新呈现.您可以在此处处进行引用. 如果将来会禁用链接，则为代码段.

You have to destroy the table first and re render. You can refer the article here. A code snippet if link gets disabled in future.

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

另一种解决方案已在此处

让我知道此解决方案是否有效，或者您有任何疑问.

Let me know if this solution works or if you have any query.

这篇关于在Angular 7中刷新datatables.net表数据可保留表第一次加载时的旧数据的副本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！