Angular 5 Datatable - обновить столбец и данные по нажатию кнопки

Question

Я использую угловую таблицу данных из angular-data-tables плагин.Я сделал компонент для таблицы данных отдельно, чтобы он мог использоваться в общем.

Следовательно, предоставляя переменную столбцов input () этому компоненту, который по существу отвечает за создание номера столбца в таблице.

этот столбец input () будет передаваться из родительского компонента, в котором находится таблица данныхкомпонент встроен.Я хочу изменить имя / количество столбцов на основе нажатия кнопки, присутствующей в родительском компоненте. Но когда я каким-то образом меняю свои столбцы в родительском компоненте, я не знаю, как столбец компонента таблицы данных становится пустым.

это url stackblitz для сценария Просто нажмите на кнопку changecolumn, и вы увидите, что заголовок станет невидимым.

Answer 1

Это потому, что angular-datatables по сути является угловой оболочкой для подключаемого модуля jQuery datatable (находится здесь: 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);
}

Это будет существенно воссоздавать всю таблицу при каждом нажатии кнопки.