在 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 秒发生一次)时，表格中会添加表格第一次加载的数据.如果我再次触摸表格，更新的数据消失，只保留旧数据，直到下一次数据更新，当新数据再次添加到表格中时.

这是页面加载时表格的状态

这是更新数据库中数据时表的状态

这是对表格进行任何更改(即排序、搜索、切换页面等)时表格的行为

这是组件的代码:

import { Component, OnDestroy, OnInit } from '@angular/core';从@angular/http"导入 { Http, Response };从'rxjs'导入{主题}；从'@angular/common/http' 导入 { HttpClient };从'../services/download/download.service'导入{下载服务}；从'querystring'导入{字符串化}；从@angular/router"导入{路由器}；@成分({选择器:应用程序下载"，templateUrl: './downloads.component.html',styleUrls: ['./downloads.component.css']})导出类 DownloadsComponent 实现 OnInit {下载数据$: any[] = [];dtOptions: DataTables.Settings = {};dtTrigger:主题<任何>= 新主题()；间隔:任意；构造函数(私有http:HttpClient，私有数据:DownloadService，私有路由器:Router){}ngOnInit() {this.dtOptions = {响应:真实};this.data.GetDownloads().subscribe(data => {this.downloadData$ = 数据；this.dtTrigger.next();});this.interval = setInterval(() => {this.refreshData();}, 5000);}刷新数据(){this.data.GetDownloads().subscribe(data => {this.downloadData$ = 数据；});}ngOnDestroy(): 无效 {this.dtTrigger.unsubscribe();}}

这是html文件

<table style="text-align: center;"class="table table-striped table-bordered table-hover" cellpacing="0" width="100%"数据表 [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"><头><tr><th>记录器名称</th><th>进展</th></tr></thead><tr *ngFor="让下载downloadData$"><td>{{download.logger.name }}</td><td [attr.data-order]="download.progress"><progress [attr.value]="download.progress" max="100"></progress>{{下载进度}}%</tr></tbody>

解决方案

你必须先销毁表格，然后重新渲染.您可以在此处参考文章.将来禁用链接时的代码片段.

rerender(): void {this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {//先销毁表dtInstance.destroy();//调用 dtTrigger 重新渲染this.dtTrigger.next();});}

另一种解决方案如此处

所述

如果此解决方案有效或您有任何疑问，请告诉我.

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>

解决方案

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

Another solution is as discussed here

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

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