Строки добавляются, в то время как Dynami c Столбцы добавляются в Mat-Table, используя Angular 8

Question

При добавлении динамических столбцов c в таблицу матов добавляются строки вместе со столбцами. Но не хотите добавлять строки в таблицу при добавлении столбцов.

У меня есть список элементов, которые необходимо добавить / удалить в виде столбцов, как динамически к таблице. При нажатии на элемент этот элемент добавляется в таблицу в виде столбца и одновременно добавляется одна строка. не хочу добавлять строку в таблицу.

Если в качестве столбцов добавляются 5 элементов, в таблицу добавляется 5 строк.

Вы можете проверить проблему https://stackblitz.com/edit/angular-pg9fie

Answer 1

Похоже, вы добавляете новую строку в источник данных каждый раз, когда добавляется столбец. Из вашего кода:

this.selectedOptions.forEach(element => {
  this.tableDataSource.push(element.name); // this is adding a row
});

Вместо этого вы просто хотите добавить столбец в список отображаемых столбцов. Есть и другие проблемы с вашим кодом, поэтому я просто делюсь примером функциональности, которую, я думаю, вы ищете:

https://stackblitz.com/edit/angular-material-table-dynamic-columns?embed=1&file=app / app. html