Как добавить пустую строку данных в Datatable с помощью angular2 +?

Question

Я хочу добавить пустую строку данных. Мое требование, как столбцы являются Dynami c. Я пытался использовать dtInstance, чтобы добавить строку. выдает ошибку.

вот ссылка

https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app / app.component.ts

Пожалуйста, дайте мне знать, если требуется более подробная информация .

Answer 1

Я не думаю, что это возможно с Angular -datatables из коробки, но вы можете использовать Angular -xeditable для достижения этого, как в этом вопросе . Лучший способ сделать это, по моему скромному мнению, заключается в том, что, когда пользователь нажимает кнопку «Добавить», мы показываем всплывающее окно, они заполняют данные, мы обновляем внутреннюю часть или справочную таблицу и повторно отображаем таблицу.

Answer 2

Для вашего требования есть простая демонстрационная программа, в которой нажимается другая кнопка для сохранения пустого столбца, к которому вы хотите получить доступ к данным.

Для простоты использования, кнопка add DATA, которая будет отображаться пустой строкой с input, стиль, который вы хотите установить CSS, и не забывайте область CSS для вашего Encapsulation.

DEMO

Если поле операции излишне, уберите его и поместите событие в три столбца после ввода с логическим условием.

---

Раздражающая кнопка

add DATA можно заменить приведенным ниже кодом, вместо этого установите life hook для вставки метода в конструктор.

ngAfterViewInit (){
  this.addData();
}

Answer 3

Вы указали неверную модель таблицы данных. Вы смешиваете разные модели в своем коде.

Я исправил это, а также добавил две пустые строки, убедитесь, что выровнены с моделью, определенной columnsDataObj

https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app / app.component.ts