javascript - 如何使用来自用户的输入数据向 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;
  } 
}