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

Question

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

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

问题说明

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

方法1->

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

Answer 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 },
  () => {     
});