代码之家 › 专栏 › 技术社区 › Mishi

无法动态显示数据表中的数据。(角度6)

angular-datatables angular6 datatable angular

1

Mishi · 技术社区 · 7 年前

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

我有6个钮扣。按一下按钮,我调用各自的方法和计算后执行。我正在将数据推入数组( )

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

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/分页/搜索,但数据显示正确。

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

0 回复 | 直到 7 年前

1

0

Dwhitz Brett Porter 7 年前

它的原因是首先呈现表,然后在api调用后加载数据。我曾经 ngIf 在获取数据之前隐藏表,那么它将正确加载。这只是个实验。

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