角材料表展开列/图标上的行单击 [英] Angular Material Table expand row on column/icon click

问题描述

关于此主题，尤其是在扩展行方面，存在许多问题.但是，我见过的所有实现都是通过使用样式像表格的手风琴/面板(需要做更多的事情来容纳分页和排序)，使用when谓词(尝试使用分页时似乎有问题)来完成的，或者似乎最理想的解决方案是在mat-row元素上附加指令.

There are numerous questions regarding this topic specifically with regards to expanding rows. However, all implementations I have seen are done by either using accordion/panels styled like tables (which require more things to be done to accommodate pagination and sorting), using the when predicate (which seems to have issues when trying to utilize pagination), or what seems to be the ideal solution is to have a directive attached to the mat-row element.

最后一个解决方案确实接近我需要做的事情.基本上，如果您在该行上单击任意位置，它将展开.参见此示例示例.但是，就我而言，在其中一列中，我有一个链接，用户可以单击以查看在其他选项卡中打开的其他信息.结果，当您单击链接时，它将打开该链接并扩展该行.

The last solution is really close to what I need to have done. Basically, if you click anywhere on the row, it will expand. See this example. However, in my case, in one of the columns, I have a link where the user can click on to see some other information that opens in another tab. As a result, when you click on the link, it will open it as well as expand the row.

对我来说，对我们的客户而言，这是不行的，我能看到的最好的解决方法是，单击一个仅带有加号的列即可扩展该行.理想的情况是只单击该图标即可展开，但暂时不要踩.

To me, its ok, however, to our customer, it isn't and the best work around I can see is to have the row expand on a click on a column which has simply a plus icon. It would be ideal to expand only on that icon click, but baby steps for now.

有人遇到过类似情况并且有某种解决方案吗?只是想朝着正确的方向.到目前为止，我已经完成了附加的堆栈闪电中的所有操作，并且效果很好.只需要最后一步就可以使客户满意！

Has anyone encountered a similar situation and have some kind of solution? Just would like to be put in the right direction. So far, I have done whatever is in the stackblitz attached and it works great. Just need this last step to make the client happy!

推荐答案

这是一种有点棘手的方法，但是可以用:

This is a slightly hacky way of doing it but it works:

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

The important part is that you're passing the UIEvent (click event) to the TS and the calling stopPropagation on it to stop the table from expanding.

这篇关于角材料表展开列/图标上的行单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！