Angular 数据表 dtOptions 仅在第二次单击时更新

Question

我正在尝试使用新的 dtOptions 更新（重新渲染）角度数据表

<button type="button" class="btn btn-success m-r-sm" id="filter" (click)="filter()">
   {{'apply' | translate}}
</button>

filter() {
const that = this;
  this.dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 20,
    serverSide: true,
    processing: true,
    searching: false,
    ajax: (dataTablesParameters: any, callback) => {
      that.service.getExtendedCdrByCriteria(this.selectedDirection, this.selectedDisposition, this.caller, this.calledNumber, this.from, this.to, dataTablesParameters).subscribe(resp => {
        that.extendedCdrs = resp.data;
        console.log('ajax call');

        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });
    },
    columns: [
      { data: 'direction' },
      { data: 'datetime' },
      { data: 'callerNumber' },
      { data: 'calledNumber' },
      { data: 'timeOnHold' },
      { data: 'callTotalTime' },
      { data: 'trunkName' },
      { data: 'disposition' },
      { data: 'recordingfile' }
    ],
  };
  this.rerender();
}

rerender(): void {
  try {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
      this.dtTrigger.next();
    });
  } catch (err) {
    console.log(err);
  }
}

当我第一次单击按钮时，ajax 调用尚未执行，并且使用相同的数据重新呈现表，但是当第二次单击按钮时，this.dtOptions 会更新并使用正确的更新数据重新呈现表。如何让它运行第一个按钮点击？

Answer 1

我认为您的 rerender() 方法的执行速度比 ajax 完成的速度快。尝试完全删除您的 rerender() 方法。