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以阻止表扩展。

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

1 个答案: