How to add empty data row in Datatable using angular2+?

问题

I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.

here is the link

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

Please let me know if more details required.

回答1:

You gave the Data table wrong model. you are mixing between different models in your code.

I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj

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

回答2:

I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.

回答3:

There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.

For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.

DEMO

If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.

---

Annoying Button

The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.

ngAfterViewInit (){
  this.addData();
}

来源：https://stackoverflow.com/questions/60082566/how-to-add-empty-data-row-in-datatable-using-angular2