如何使用来自用户的输入数据向ngx-datatable添加新行？

Question

如何根据用户输入将新行添加到ngx-datatable ？

我添加一个空行，像这样：

addRow() {
  this.rows.unshift({unique_id: '<em>empty</em>', name: '<em>empty</em>'});
  this.rows = this.rows.slice();
}

但是如何控制行，以便用户可以向该行添加数据？

Answer 1

更改您的component.html以遍历所有标签

 <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [rows]="rows" [scrollbarH]="true"> <ngx-datatable-column *ngFor="let label of labels" [name]="label.name" [prop]="label.prop"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"> <span title="double Click here " (dblclick)="editCell(label.prop, rowIndex)" *ngIf="!editing[rowIndex + '-' + label.prop]" > {{ value }} </span> <input autofocus (blur)="updateValue($event, label.prop, rowIndex)" (keyup.enter)="updateValue($event, label.prop, rowIndex)" *ngIf="editing[rowIndex+ '-' + label.prop]" [type]="label.inputType" class="form-control" [value]="value" /> </ng-template> </ngx-datatable-column> </ngx-datatable> 

然后将这些方法添加到您的component.ts中

 @Component({ selector: 'app-mycomponent', templateUrl: './mycomponent.component.html', styleUrls: ['./mycomponent.component.css'] }) export class MyComponent{ editing = {}; rows = []; labels = []; // call to update cell value updateValue(event, cell, rowIndex) { this.editing[rowIndex + '-' + cell] = false; this.rows[rowIndex][cell] = event.target.value; this.rows = [...this.rows]; } // call on double click in cell editCell(cell, rowIndex) { this.editing = {}; this.editing[rowIndex + '-' + cell] = true; } }