在 Angular 2 中重新渲染数据表

Question

在我的组件中，我使用数据表来显示来自后端的数据。我能够从后端获取数据（使用服务），成功解析它并在数据表中显示数据。但是，我的问题是，当我的组件首次呈现时，网络调用尚未完成，因此表中填充有“表中没有可用数据”。网络调用完成后，表中就会填充来自服务器的数据，但消息“表中没有可用数据”仍然存在。 这是我的网络调用代码 -

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

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

我在 

ngOnInit()

中调用这个方法。我也尝试在构造函数内部以及 ngAfterViewChecked() 中调用此方法，但没有成功。 我的 showData() 方法永远不会被调用。

在数据表的文档中，他们提到了名为 rerender() 的东西，它可用于重新渲染表，但我不知道应该在哪里使用它。我将它放置在我的 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

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

Answer 2

here

，其中提到了以下关于 datatables-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 3

首先确保

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

应该强制表格渲染。

Answer 4

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 5

    .dataTables_empty {
      display: none;
     }