Angular Mat-table with expandable rows - 单击行按钮停止扩展

Question

我希望在用户单击位于行上的按钮时禁用行扩展。特别是如果我们每行都有一个弹出菜单，当行扩展同时发生时，它真的会让人分心。有没有办法阻止这种情况发生。

参见下面的示例，当用户尝试单击行右端的三个垂直点时，行会展开。事实上，这发生在点击该行的任何按钮时。 https://stackblitz.com/edit/angular-uy3mc4-cfmqoh

Answer 1

一个简单的方法是调用 $event.stopPropagation() 事件处理程序来阻止面板接收点击事件。例如：

而不是

<button mat-icon-button (click)="editAsset(row)" title="Edit">
   <mat-icon color="primary">mode_edit</mat-icon>
</button>

使用

<button mat-icon-button (click)="$event.stopPropagation(); editAsset(row)" title="Edit">
   <mat-icon color="primary">mode_edit</mat-icon>
</button>

Angular Mat-table with expandable rows - stop expansion on row button click