单击按钮将Prime NG表移至下一个单元格

时间:2018-08-10 18:17:02

标签: angular primeng

我正在使用PrimeNGs表显示2d数组。我试图创建一个按钮,将当前单元格的值填充到字符串,然后将光标移到下一个。我正在使用ViewChildren选择cellEditors,然后调用moveToNextCell方法,但是我一直在TypeError: Cannot read property 'parentElement' of null方法内遇到moveToNextCell。我是否需要找到一种方法,从表组件导航到单元格,然后调用MoveToNextCell?

模板

<p-table [columns]="matrixColumns" [value]="matrix">
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td *ngFor="let cell of rowData; index as columnIndex;" [pEditableColumn]="rowIndex" [pEditableColumnField]="columnIndex" [ngStyle]="rowData[columnIndex].Style">
                <p-cellEditor >
                <ng-template pTemplate="input">
                    <p>({{columnIndex+1}},{{rowIndex+1}})</p>
                    <input type="text" [(ngModel)]="cell.value">
                </ng-template>
                <ng-template pTemplate="output">
                    ({{columnIndex+1}},{{rowIndex+1}})<br>
                    {{cell.value}}<br>
                </p-cellEditor>
            </td>
        </tr>
    </ng-template>
</p-table>

简化代码

   @ViewChildren(CellEditor) editors: QueryList<CellEditor>;
      public buttonPress() {
        this.setCellValue(this.currentX, this.currentY);
        var editor = this.editors.find((editor) => parseInt(editor.editableColumn.field, 10) === this.currentX + 1 && parseInt(editor.editableColumn.data, 10) === this.currentY + 1);
        editor.editableColumn.moveToNextCell(new KeyboardEvent('keypress', { key: 'Tab'}));
      }

https://www.primefaces.org/primeng/#/table

0 个答案:

没有答案