角度材料表在列/图标上展开行单击 [英] 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.

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

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屋！