在 Angular 中重新呈现 DataTable 2

Question

在我的组件中，我使用数据tables 来显示来自我的后端的数据。我能够从后端获取数据（使用服务），成功解析它并在 data-table 中显示数据。但是，我的问题是，当我的组件首次呈现时，网络调用尚未完成，因此 table 填充了 "No data available in table"。网络调用完成后，table 会填充来自服务器的数据，但消息 "No data available in table" 仍然存在。

这是我的网络调用代码 -

fetchData(){
    this.networkservice.getAllReceipts()
          .subscribe(

            res => {
              this.itemList = res;
            }, error => alert(error),
            () => this.showData());
  }

我在 ngOnInit() 中调用此方法。我也尝试在构造函数内部以及 ngAfterViewChecked() 内部调用此方法，但没有成功。

我的 showData() 方法从未被调用。

在 data-tables 的文档中，他们提到了一个叫做 rerender() 的东西，它可以用来重新渲染 table 但我不知道我应该在哪里使用它。我将它放在我的 showData() 方法中，但它从未被调用过。

我还使用 "setTimeout" 设置了 5 秒的超时，但即使这样似乎也不起作用。

我的HTML代码-

<table id="receiptTable" [dtTrigger]="dtTrigger" datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>LastName name</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody *ngIf="itemList">
      <tr *ngFor="let user of itemList">
        <td>{{user.id}}</td>
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td><button (click)="getUser(user.id)">Edit</button></td>
      </tr>
    </tbody>
</table>

请帮忙。

Answer 1

如果我们有更多的代码可以看就更好了，但你也可以看看here，其中提到了以下添加的数据表-angular模块用法：

// We use this trigger because fetching the list of persons can be quite long,
// thus we ensure the data is fetched before rendering
dtTrigger: Subject = new Subject();

ngOnInit(): void {
    this.http.get('data/data.json')
      .map(this.extractData)
      .subscribe(persons => {
        this.persons = persons;
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next();
      });
  }

Answer 2

使用您的代码应该可以正常工作。这不完全是帮助您调试的几个步骤的答案。

首先确定 this.itemList 是 undefined 或 null 只是为了确定。

要验证您是否正在获取数据，请将 do 添加到调试。将组件代码更改为：

this.networkservice.getAllReceipts()
    .do(res => console.log(res))
    .subscribe(
        res => {this.itemList = res},
        error => console.error(error) 
     );

如@Giannis 所述，添加 this.dtTrigger.next() 应该强制 table 渲染。

Answer 3

您可以使用 angular 数据表，link 在这里 https://l-lin.github.io/angular-datatables/#/getting-started。只需按照本文档中的步骤操作即可。

在您的代码中，在 "this.itemList" 中获取数据后添加 this.dtTrigger.next()。如下所示：

获取数据(){ this.networkservice.getAllReceipts() .订阅（

        res => {
          this.itemList = res;
          this.dtTrigger.next();    ***## Add here ##***
        }, error => alert(error),
        () => this.showData());

}

Answer 4

我在 angular 7 中尝试过这个并且它有效.. 运行时数据表已更改

.ts文件

import { Component, AfterViewInit, OnDestroy, OnInit, ViewChild } from '@angular/core';
    import { DataTableDirective } from 'angular-datatables';
    
    @Component({
      selector: 'app-selector',
      templateUrl: 'app-selector.component.html'
    })
    export class CustomRangeSearchComponent implements AfterViewInit, OnDestroy, OnInit {
      @ViewChild(DataTableDirective, {static: false})
      datatableElement: DataTableDirective;
      dtOptions: DataTables.Settings = {};
      tableData = [];
    
      ngOnInit(): void {
        this.dtOptions = {
          destroy: true,
          ordering: true,
          pagelength: 10,
          pagingType: "full_numbers",
          columnDefs: [{ 
            targets: 0,
            checkboxes:{
            selectRow: true,
            selected: true
          }]
        };
      }
    
      ngOnDestroy(): void {
        $.fn['dataTable'].ext.search.pop();
      }

      ngAfterViewInit(): void {
        this.dtTrigger.next();
      }
    
      getdata(){
    
        //... get your response
        this.tableData = response; //this should be in array

        setTimeout(() => {
          this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.draw();
          });
        });
      }
    }

.HTML 文件

<button class="btn btn-primary" (click)="getData()">Filter by ID</button>
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

在 Angular 中重新呈现 DataTable 2

Re-render DataTable in Angular 2

angular-datatables

angular