TypeError：无法读取空p-treetable角的属性'parentElement'

问题描述

我正在使用以下代码在Angular应用程序的p-treeTable中加载数据。当我尝试使用Tab键在树表单元格编辑器文本框中导航时，从可编辑字段导航至不可编辑字段（即，从名称单元格导航至类型单元格）时，出现以下错误消息。

<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

解决方法

这似乎与聚焦单元格但未在ui-editing-cell元素上设置td类时引发primem的意外行为有关。

作为解决方法，您可以尝试以下操作：

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

angular primeng