Блог

Я вызываю службу API, которая возвращает массив JSON. У меня также есть код во внешнем интерфейсе, который составляет список столбцов или полей на основе 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 будут изменены на новый список столбцов. Но проблема в том, что он не выполняет повторную визуализацию столбцов.

В примере ниже показано первое изображение с начальными столбцами таблицы данных, на втором изображении показаны пустые столбцы, измененные во время выполнения

Перед изменением переменных fields:

После изменения полей во время выполнения: