带有 *ngIf 的 Angular 数据表显示错误

Question

我正在使用 Angular Datatables显示一些表格数据。我在表中添加了一个 *ngIf 条件，这样在数据完全加载之前它是不可见的。表格代码如下所示:

<table class="table" id="releaseDatatable" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" *ngIf="!loading">

我从组件中设置的 loading 变量然后调用 this.dtTrigger.next()。我有以下代码来设置 loading。

set loading(loading: boolean) {
        this._loading = loading;
       setTimeout(()=>{
            this.dtTrigger.next();
       }, 100);
    }

现在第一次一切正常。但是当我尝试重新加载表格时(编辑或删除后)，它显示以下错误:

ERROR ObjectUnsubscribedErrorImpl {message: "object unsubscribed", name: "ObjectUnsubscribedError"} 

和this.dtTrigger 有null 作为观察者。如何解决这个问题？我尝试重新渲染表格，但它也不起作用。

Answer 1

您可以使用 [ngClass] 并隐藏而不是使用 ngIf

<table class="table" id="releaseDatatable" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" [ngClass]="loading">

在组件中将加载属性设置为“隐藏”或“显示”；

在CSS中隐藏它

.hide{
   display:none;
}

为了再次渲染，我使用了 destroy 和 trigger next

导入

  import { DataTableDirective } from 'angular-datatables';

  @ViewChild(DataTableDirective, {static: false})  
   datatableElement: DataTableDirective;

渲染

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

调用这个重新渲染方法

set loading(loading: boolean) {
       setTimeout(()=>{
            this.rerender();
       }, 100);
    }