Angular 角度6-点击事件未触发

我想在有角度的桌子上加一个按钮

它显示按钮，但单击按钮时，不会触发事件

这是我的桌子：

<table mat-table [dataSource]="GetGridData()">
  <!-- Rest removed for brevity.. -->

  <ng-container matColumnDef="Products">
    <th mat-header-cell *matHeaderCellDef> Products </th>
    <td mat-cell *matCellDef="let element">
      <button mat-raised-button (click)="OnGetAllProducts(element.CategoryId)">See all products</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="GetGridHeader()"></tr>
  <tr mat-row *matRowDef="let row; columns: GetGridHeader();"></tr>
</table>

这是我的模型：

export class Category {
    public CategoryId: number;
    public CategoryName: string;
}

---

这是

数据源

。您的GetGridData（）函数一直在运行，因为您将它放在模板中，这会无休止地重新呈现表，这就是为什么这种做法不好的原因。相反，将结果存储在一个变量中，这就是您应该作为数据源传递的内容。

TLDR验证样式的正确性

由于许多人可能会遇到类似的问题，并在这里登陆（就像我自己），我希望当我发布对我有用的解决方案以帮助下一代时，这不会是一个很大的冒犯

@BasavarajBhusani和其他人提出了一个非常好的问题，即从UI中是否可以看到

按钮

事实是，尽管“我的按钮”在物理上是可见的，但它还是滑出了父元素的边框。在通过使父元素动态调整其大小来修复样式之后，它开始正常工作

奇怪的是，同样的布局在AngularJS（1.X）中运行得很好，但在移植到Angular 6后停止了。
您在控制台中看到任何错误吗？实际上应该可以工作，
查看所有产品的按钮在UI中可见吗？不，我没有看到任何错误。是的，应该这样。我还是不明白为什么没有。已经有半天了。是的，它实际上是可见的@Basavarajbhusanio我注意到的一件事是，如果我把按钮从桌子上拿下来，它会完美地工作。当我把它放在桌子里面的时候，它就搞砸了。对我来说是正确的。在单击按钮时重新呈现表，因此中断了单击过程。我已将getter更改为缓存数组变量并返回相同的对象，除非派生参数更改。谢谢非常感谢你。这节省了很多时间。
export class Category {
    public CategoryId: number;
    public CategoryName: string;
}