TypeError: Cannot read property 'parentElement' of null p-treetable angular

Question

我正在使用以下代码在 Angular 应用程序的 p-treeTable 中加载数据。当我尝试使用 Tab 键浏览树 table 单元格编辑器文本框时，我在从 editable 字段导航到非 editable 字段时收到以下错误消息，即从命名单元格以键入单元格。

代码：

<p-treeTable #tt [value]="files" [columns]="cols">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of cols" style="width:30px">
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData"  let-columns="columns">
    <tr [ttRow]="rowNode">
        <td width="30" class="text-right" ttEditableColumn> 
          <p-treeTableToggler [rowNode]="rowNode">
                </p-treeTableToggler>
            <p-treeTableCellEditor>
                <ng-template pTemplate="input">
                    <input type="text" pInputText [(ngModel)]="rowData['name']" />
                </ng-template>
                <ng-template pTemplate="output">
                    <input type="text" pInputText [(ngModel)]="rowData['name']">
                 </ng-template>
            </p-treeTableCellEditor>
         </td> 
         <td width="30" class="text-right">
            <span>
                {{rowData['size']}}
            </span>
         </td>
         <td width="30" class="text-right" ttEditableColumn>
            <p-treeTableCellEditor>
                <ng-template pTemplate="input">
                    <input type="text" pInputText [(ngModel)]="rowData['type']" />
                </ng-template>
                <ng-template pTemplate="output">
                    <input type="text" pInputText [(ngModel)]="rowData['type']">
                 </ng-template>
            </p-treeTableCellEditor>
         </td>
    </tr>
</ng-template>

错误信息：

core.js:4117 ERROR TypeError: Cannot read property 'parentElement' of null
    at TTEditableColumn.push../node_modules/primeng/__ivy_ngcc__/fesm5/primeng-treetable.js.TTEditableColumn.moveToNextCell (primeng-treetable.js:3393)
    at TTEditableColumn.push../node_modules/primeng/__ivy_ngcc__/fesm5/primeng-treetable.js.TTEditableColumn.onKeyDown (primeng-treetable.js:3366)
    at TTEditableColumn_keydown_HostBindingHandler (primeng-treetable.js:3461)
    at executeListenerWithErrorHandling (core.js:14935)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14970)
    at HTMLTableCellElement.<anonymous> (platform-browser.js:615)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:28122)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

StackBlitz 演示： https://stackblitz.com/edit/primeng-treetable-hte3gta?file=src%2Fapp%2Fapp.component.html

Answer 1

这似乎与当您聚焦单元格但 ui-editing-cell class 未在 td 元素上设置时 primeng 的意外行为有关。

您可以尝试以下解决方法：

import { TTEditableColumn } from 'primeng/primeng'

const origingFindCell = TTEditableColumn.prototype.findCell;
TTEditableColumn.prototype.findCell = function (element) {
  let result  = origingFindCell.call(this, element);
  if (!result && element) {
    result = element.closest('td.ui-editable-column')
  }

  return result;
};

Forked Stackblitz