如何在运行时动态重新创建datagrid列？

Question

我正在调用一个返回JSON数组的API服务。我在前端也有一个代码，该代码根据JSON组成了列或字段的列表。此列列表不是固定列表，并且可以根据JSON内容而有所不同。因此，我需要在运行时动态地重新创建数据网格列。

当使用* ngFor指令并遍历代码中预定义或预初始化的列数组时，它可以工作，但是我需要在运行时更改列列表。

示例：

<clr-dg-column *ngFor="let field of fields" [clrDgField]="field.name">
    {{ field.text }}
</clr-dg-column>

let fields = [ { name: "id", text: "Id" }, { name: "name", text: "Name" }];

changeFields() {
    this.fields = [ { name: "userId", text: "User Id" }, { name: "desc", text: "Description" }];
}

调用changeFields()函数时，我希望datagrid列更改为新的列列表。但是问题在于它不会重新渲染列。

下面的示例显示了第一张带有数据网格初始列的图像，第二张图像显示了在运行时更改的空白列

更改字段变量之前：

在运行时更改字段后：