Angular 5 Datatable - 单击按钮刷新列和数据

Question

我正在使用来自angular-data-tables 插件的角度数据表。 我已经单独为数据表制作了一个组件，以便可以通用。

因此向该组件提供 input() 列变量，该组件主要负责在表中创建列数。

这个 input() 列将从嵌入数据表组件的父组件传递。我想根据父组件中存在的按钮单击来更改列名称/计数。但是当我以某种方式更改父组件中的列时，我不知道数据表组件列如何变为空。

这是stackblitz url for the scenario 只需单击更改列按钮，您将看到标题将变得不可见。

Answer 1

这是因为 angular-datatables 本质上是 jQuery 数据表插件的 Angular 包装器（可在此处找到：https://datatables.net/）。

根据他们的手册

初始化后对表的任何操作都必须通过 API 完成

在这里找到https://datatables.net/manual/tech-notes/3

angular-datatables 插件实际上具有支持异步加载数据的 API。可以在这里找到一个例子： https://l-lin.github.io/angular-datatables/#/basic/angular-way

现在，对于您的具体示例，解决方法是从 DOM 中完全删除表格组件，更改列，然后重新初始化表格组件。因此，在您的 stackblitz 示例中：

在 app.component.html 中：

<button (click)="buttonclick()">change columns</button>

<hello *ngIf="showTable" [columns] = "columns"></hello>

在 app.component.ts 中，更改按钮点击功能并添加 showTable 变量：

showTable: boolean = true;
buttonclick(){
    this.showTable = false;
    this.columns=["new_id","new_firstname","new_lastname"];
    setTimeout(()=>{this.showTable = true}, 0);
}

这将基本上在每次单击按钮时重新创建整个表格。