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

我已经在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>

Answer 2

如果我们需要查看更多代码会更好，但您也可以查看here，其中提到了以下对数据表 - 角度模块用法的添加：

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

您可以使用Angular datatables，只需按照本文档中的步骤操作即可。

在this.dtTrigger.next()中获取数据后，在代码中

添加this.itemList。如下所示：

fetchData() {
    this.networkservice.getAllReceipts().subscribe(
        res => {
            this.itemList = res;
            this.dtTrigger.next();

            // Add here..

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

在Angular 2

4 个答案: