Angular中解决Property 'showAll'不存在于HTMLTableDataCellElement类型的问题

问题原因 #

你给<td>元素添加的模板引用变量#myCell指向的是原生DOM元素HTMLTableDataCellElement，这个原生对象并没有自定义的showAll属性，因此TypeScript会抛出类型不匹配的错误。

解决方案 #

方案一：将状态管理移至组件类（推荐） #

把控制显示切换的showAll状态放到组件类中，通过数据绑定控制视图，这是Angular组件化开发的标准做法。

1. 在组件.ts文件中定义状态变量和切换方法：

// 假设表格数据为items数组，每个item包含唯一标识（如id）
showAllStates: Record<string, boolean> = {};

toggleShowAll(itemId: string): void {
  this.showAllStates[itemId] = !this.showAllStates[itemId];
}

2. 在模板中使用组件状态控制显示：

<p-table [value]="items">
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>
        <!-- 根据组件状态显示对应内容 -->
        <div *ngIf="showAllStates[item.id]">
          <!-- 所有角色芯片的渲染逻辑 -->
        </div>
        <div *ngIf="!showAllStates[item.id]">
          <!-- 部分角色芯片的渲染逻辑 -->
        </div>
        <button (click)="toggleShowAll(item.id)">切换显示</button>
      </td>
    </tr>
  </ng-template>
</p-table>

方案二：类型断言绕过TypeScript检查（不推荐） #

如果一定要通过DOM元素挂载状态，可以用类型断言告诉TypeScript忽略类型检查，但这种方式会把状态耦合到DOM上，不利于后续维护。

模板中直接使用类型断言：

<td #myCell>
  <div *ngIf="(myCell as any).showAll">
    <!-- 所有角色芯片的渲染逻辑 -->
  </div>
  <div *ngIf="!(myCell as any).showAll">
    <!-- 部分角色芯片的渲染逻辑 -->
  </div>
  <button (click)="(myCell as any).showAll = !(myCell as any).showAll">切换显示</button>
</td>

或者在组件类中初始化状态：

import { ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChildren('myCell') cells!: QueryList<ElementRef<HTMLTableDataCellElement>>;

  ngAfterViewInit(): void {
    this.cells.forEach(cell => {
      // 断言为any类型，添加showAll属性
      (cell.nativeElement as any).showAll = false;
    });
  }
}

内容的提问来源于stack exchange，提问作者Township