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

Posted 2023-05-07

【中文标题】带有 *ngIf 的 Angular 数据表显示错误

【英文标题】：Angular Datatables with *ngIf shows error

【发布时间】：2020-11-06 20:48:34

【问题描述】：

我正在使用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 作为观察者。如何解决这个问题？我尝试重新渲染表格，但它也无法正常工作。

【参考方案1】：

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

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

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

在css中隐藏它

.hide
   display:none;

为了再次渲染，我使用销毁并触发下一个

导入

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

【讨论】：

this 上下文已经被箭头函数捕获，不需要self 变量

我认为问题在于ngIf 从 DOM 中删除了表格，因此第二次无法触发表格重新加载。但不知道如何解决它。

@HappyCoder 是的，你是对的。您可以使用 class 而不是 ngIf 作为一种方式。我用这种方法更新答案

那也行不通。它显示DataTables warning: table id=releaseDatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

这是重新渲染问题。我更新了重新渲染表的答案。我首先销毁然后触发下一个@HappyCoder

【参考方案2】：

这是 Angular Datatables 如何重新渲染的一个已知问题

您可以从 GitHub 问题列表中找到更多详细信息和解决方法，例如https://github.com/l-lin/angular-datatables/issues/1241

一些 cmets 建议使用 [hidden] 而不是 *ngIf

【讨论】：

任何解决方法？我尝试使用那里提到的hidden，但它显示错误DataTables warning: table id=releaseDatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

您是否关注了警告消息提供的文档链接？

是的。但不知道如何解决这个问题。

该组件库在后台使用 jQuery，这也是存在如此多未解决问题和渲染问题的部分原因（它没有以推荐的方式遵循 Angular 组件生命周期）。您是否考虑过 ag-grid 作为替代方案 - 如果您还没有大量投资于这个是

【参考方案3】：

最好为您的表格添加一个包装器 div，例如 <div *ngIf="!loading"><table></table></div>

Angular v2 不支持在同一个元素上使用多个结构指令。