我正在使用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'}));
}