Question

我正在使用来自angular-data-tables插件的角度数据表。我已经单独为数据表创建了一个组件，因此可以一般地使用它。

因此为该组件提供了input（）列变量，该变量基本上负责在表中创建列数。

此input（）列将从嵌入了data-table组件的父组件传递。我想根据父组件中的按钮单击更改列名称/计数。但是当我更改父组件中的列时，我不知道数据表组件列如何变空。

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

Answer 1

这是因为angular-datatables本质上是jQuery数据表插件的角度包装器（在此处找到：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);
}

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

Angular 5 Datatable - 按下按钮

1 个答案: