角材料表在列/图标上展开行单击

Question

关于这个主题有很多关于扩展行的问题。但是，我看到的所有实现都是通过使用类似于表格的手风琴/面板（需要做更多的事情来适应分页和排序），使用 when 谓词（在尝试使用分页时似乎有问题）来完成的，或者似乎理想的解决方案是将指令附加到 mat-row 元素。

最后一个解决方案非常接近我需要做的事情。基本上，如果您单击行上的任意位置，它将展开。请参阅此example。但是，就我而言，在其中一列中，我有一个链接，用户可以单击该链接以查看在另一个选项卡中打开的其他一些信息。因此，当您单击链接时，它将打开它并展开该行。

对我来说，这没问题，但对我们的客户来说，它不是，我能看到的最好的解决方法是让行在点击一个只有加号图标的列时展开。仅在该图标单击时展开是理想的，但现在只是小步。

有没有人遇到过类似的情况并有解决办法？只是想被放在正确的方向。到目前为止，我已经完成了附加的 stackblitz 中的所有内容，并且效果很好。只需要这最后一步让客户满意！

Answer 1

这是一种有点老套的方法，但它确实有效：

HTML：

<!-- Name Column -->
<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"><span (click)="showDetails($event, element)">{{element.name}}</span> 
    </mat-cell>
</ng-container>

TS：

showDetails(event: UIEvent, element): void {
    event.stopPropagation();
    // Do whatever with the element
}

重要的部分是您将 UIEvent（点击事件）传递给 TS 并在其上调用 stopPropagation 以阻止表格展开。