Angular中<tr>标签的(click)点击事件失效问题求助

我在Angular项目中实现了表格行点击跳转功能，但点击<tr>标签完全没反应，console.log也没有输出，试过多种方法都没解决。以下是相关代码：

component.ts 中的 readDetails 方法 #

readDetails(){
    this.router.navigate(['/dettaglio-contributivo']);
    console.log("There it is")
}

component.html 中的表格代码 #

<tr *ngFor="let item of tableData" (click)="readDetails()">
    <td class="text-start">{{item.enteImpositore}}</td>
    <td class="text-start">VIA MONS CECE</td>
    <td class="text-start">CIMITILE</td>
    <td class="text-start">{{item.tributo}}</td>
    <td class="text-end">{{item.identificativo}}</td>
    <td class="text-end">{{item.anno}}</td>
    <td class="text-end">{{item.ruolo}}</td>
    <td class="text-end">1.320</td>
    <td class="text-end">0,00</td>
    <td class="text-end">468,04</td>
    <td class="text-end">852,45</td>
</tr>

app-routing.module 中的路由配置 #

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'posizione-contributiva', component: PosizioneContributivaComponent },
      { path: 'dettaglio-contributivo/:id', component: DettaglioContributivoComponent}
    ]
  }
];

排查方向 #

• 事件绑定有效性检查
  先注释掉路由跳转代码，只保留console.log，确认点击是否触发。若仍无输出，检查<tr>是否被其他元素覆盖（比如父容器设置了pointer-events: none，或上层有透明遮罩），可通过浏览器开发者工具查看<tr>的点击区域。
• 组件上下文与方法权限
  确认readDetails方法定义在当前组件类中，且未加private修饰符（模板无法访问私有方法）；同时检查组件是否已正确声明在对应模块中。
• 路由参数与路径匹配
  路由配置中dettaglio-contributivo要求带:id参数，但当前跳转代码未传参，即使事件触发也会跳转失败。需修改为['/dettaglio-contributivo', item.identificativo]（假设identificativo为对应id值）；若当前组件在LayoutComponent子路由下，也可尝试相对路径['../dettaglio-contributivo', item.identificativo]。
• 数据渲染时机
  若tableData为异步加载，需确保数据加载完成后再渲染表格，可在<tr>所在的表格容器上添加*ngIf="tableData"，避免事件绑定到未初始化的元素上。

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