Angular 5 数据表 - 在按钮点击时刷新列和数据

Question

我正在使用 angular-data-tables 插件中的 angular data-table。我已经为 data-table 单独制作了一个组件，以便可以通用地使用它。

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

此 input() 列将从 parent 组件传递，其中嵌入了 data-table 组件。当我更改 parent 组件中的列时，我想根据 parent component.but 中的按钮单击更改列 name/count 我不知道 data-table 组件列变为空。

这是stackblitz url for the scenario 只需单击 changecolumn 按钮，您就会看到 header 将变得不可见。

Answer 1

这是因为 angular-datatables 本质上是 jQuery datatable 插件的 angular 包装器（在此处找到：https://datatables.net/).

根据他们的手册

Any manipulation of the table after initialisation must be done through the API

在此处找到 https://datatables.net/manual/tech-notes/3

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

现在，对于您的特定示例，解决方法是从 DOM 中完全删除 table 组件，更改列，然后重新初始化 table 组件。因此，在您的 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);
}

这将在每次单击按钮时重新创建整个 table。

Angular 5 数据表 - 在按钮点击时刷新列和数据

Angular 5 Datatable - refresh the column and data on button click

angular-datatables

angular