无法动态显示数据表中的数据。（角6）答案

【问题标题】：Unable to display data in data table dynamically. ( Angular 6 )无法动态显示数据表中的数据。（角6）
【发布时间】：2019-08-03 20:39:25
【问题描述】：

我正在使用角度数据表。我正在尝试更改其中的数据。我有 6 种方法执行不同的计算并将数据推送到数组中。

我有 6 个按钮。单击按钮时，我正在调用相应的方法并在执行计算后。我正在将数据推入数组 (storiesOfIndicators)

问题陈述

第一次单击按钮正确显示表格，但是当我单击下一步按钮时，数据未正确显示，分页状态显示第一个方法结果的结果。数据表未正确呈现。基本上分页不起作用

方法一->

storiesWhomDefectTimeIsGreaterThanDev() {
    this.storiesOfIndicators = [];
    for (let i = 0; i < this.global.data.length; i++) {
        if (this.global.data[i].defectTime > this.global.data[i].devTime) {
            this.storiesOfIndicators.push(this.global.data[i])
        }
    }
}

我的桌子

<table id="indicators" *ngIf="storiesOfIndicators.length > 0" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
    <thead>
        <tr>
            <th>Story Id</th>
            <th>Story Name</th>
            <th>Time Spent (Days)</th>
            <th>Estimated Time (Days)</th>
            <th>Threshold Value</th>
            <th>Aggregated Estimated Time (Days)</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let story of storiesOfIndicators">
            <td>{{story.id}}</td>
            <td>{{story.name}}</td>
            <td>{{convertValueToDays(story.timeSpent)}}</td>
            <td>{{convertValueToDays(story.originalEstimates)}}</td>
            <td>{{story.threshold}}</td>
            <td>{{convertThresholdValue(story.originalEstimates)}}</td>
            <td>{{story.status}}</td>
        </tr>
    </tbody>
</table>

尝试过的解决方案 我尝试在每个方法的开头添加this.dtrigger.next()，但它不起作用。

我再次尝试在我的方法开始时调用此方法，但没有工作，而是删除了我的 css/pagination/search，但数据显示正确。

ngAfterViewInit(): void {
    this.dtTrigger.next();
}
rerender() {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
    });
}

【问题讨论】：

没有例子理解你的分页问题有点复杂。你能给我们提供一个 stackblitz 或 plunker 的例子吗？谢谢。
查看this 了解分页文档
@Tushar Walzade 我想重新初始化表格。数据和分页功能不正常。

标签： angular datatable angular6 angular-datatables

【解决方案1】：

这是因为先渲染表格，然后在 api 调用后加载数据。我使用ngIf 隐藏表格，直到获取数据，然后它将正确加载。这只是一个实验。

html

<table datatable  class="table" *ngIf="flg"  >

.ts 文件

flg: boolean = false;

this._UsersService.GetUser(Mobile, Department, Section, Branch, designation_Id, group).subscribe((data: ResponseData) => {
  if (data.data.length > 0) {
      this.flg = true;

      this.UserList = data.data;
   }

      console.log(this.UserList);
},
error => { this.errorMessage = <any>error },
  () => {     
});

【讨论】：