具有可扩展行的 Angular Mat-table - 单击行按钮时停止扩展

【问题标题】：Angular Mat-table with expandable rows - stop expansion on row button click具有可扩展行的 Angular Mat-table - 单击行按钮时停止扩展
【发布时间】：2020-05-29 02:17:22
【问题描述】：

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

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

【问题讨论】：

标签： angular angular-material mat-table angular-material-table

【解决方案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>

【讨论】：