Angular 使用 dtTrigger 重新加载数据表

Question

我在我的一个项目中使用 Angular 数据table。我显示数据，然后单击按钮我必须重新加载数据。我有以下设置：

在.html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-responsive"
    style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Group</th>
            <th>Weight</th>
            <th>Control Valves</th>
            <th>Zones</th>
            <th>Decks</th>
            <th></th>
        </tr>
    </thead>
    <tbody *ngIf="roomsList?.length != 0">
        <ng-container *ngFor="let room of roomsList; let id = index">
            <tr *ngIf="room.visibility">

                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
            </tr>
        </ng-container>

    </tbody>
    <tbody *ngIf="roomsList?.length == 0">
        <tr>
            <td colspan="3" class="no-data-available">Loading...</td>
        </tr>
    </tbody>
</table>

在我的 .ts 文件中：

dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();

async ngOnInit() {
  
  this.dtOptions = {
    
    columnDefs:[
      {
        targets: 0,
        width: "20%"
      }
    ],
    ordering: false,
    paging: true,
    responsive:true,
    searching: false,
    
  };

  this.roomsList = //some api call to get data;
  this.dtTrigger.next();
}

async onSave(event){

  this.roomsList = //some api call to get data;
  this.dtTrigger.next();
  console.log(this.roomsList);
  console.log(request);
}

当我使用 this.dtTrigger.next(); 执行此操作时，出现以下错误：

当我评论 this.dtTrigger.next(); 时，我没有得到错误，但我认为发生了什么，旧数据仍然存在，新数据被呈现，分页消失，所有 500+行出现在 table.

我读过这个 dtTrigger.next() 函数，手动重新渲染 table，但在我的情况下它给了我一个错误。

有人可以指教，我可能做错了什么吗？

如果需要更多信息，我可以提供！

此致，

朱利安

Answer 1

我在打开的 github 问题的答案中找到了解决方案。解决方案就在这个 link:

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });

我必须获取 table 实例并销毁它，然后再重新渲染 table。

此致，

朱利安

Angular 使用 dtTrigger 重新加载数据表

Angular Datatables reload with dtTrigger

javascript

angular

datatables