在 tabulator-tables angular

Question

我正在使用角度制表符表。我希望能够在已右键单击的特定行的上方或下方添加新的空行。目前的实现是错误的。它有时会正确添加一个新行，有时却不会。这是演示的链接。 https://stackblitz.com/edit/angular-ivy-srtlwq?file=src%2Fapp%2Fexample-table%2Fexample-table.component.ts

代码-

import { AfterViewInit, Component, OnInit } from '@angular/core';
import Tabulator from 'tabulator-tables';

const persons = [
  {
    id: '1',
    firstName: 'John',
    lastName: 'Smith',
    state: 'Ohio',
  },
  {
    id: '2',
    firstName: 'Jane',
    lastName: 'Doe',
    state: 'Iowa',
  },
  {
    id: '3',
    firstName: 'Bill',
    lastName: 'Great',
    state: 'Hawaii',
  },
  {
    id: '4',
    firstName: 'Ted',
    lastName: 'Adventure',
    state: 'Arizona',
  },
];

@Component({
  selector: 'app-example-table',
  templateUrl: './example-table.component.html',
  styleUrls: ['./example-table.component.css'],
})
export class ExampleTableComponent implements OnInit, AfterViewInit {
  exTable: any;
  filterParam: string = '';

  tab = document.createElement('div');

  table_def = [
    { title: 'Id', field: 'id' },
    { title: 'First Name', field: 'firstName' },
    { title: 'Last Name', field: 'lastName' },
    { title: 'Location', field: 'state' },
  ];
  constructor() {}

  ngOnInit() {
    this.exTable = new Tabulator(this.tab, {
      height: 130,
      layout: 'fitColumns',
      columns: this.table_def,
      movableColumns: true,
      data: persons,
      rowContextMenu: [
        {
          label: 'Add row above',
          action: (e, row) => {
            const index = row.getPosition(true);
            this.exTable.addRow({}, false, index);
          },
        },
        {
          label: 'Add row below',
          action: (e, row) => {
            // this.exTable(row.getIndex());
            const index = row.getPosition(true);
            this.exTable.addRow({}, false, index + 1);
          },
        },
      ],
    });
    //    this.exTable.setData(persons);
    document.getElementById('ex-table-div').appendChild(this.tab);
  }
  ngAfterViewInit() {
    this.exTable?.setData(persons);
  }
}

要重现该问题，请尝试右键单击填充的行并在上面添加一行两次。