问题
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!
回答1:
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
}
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.
来源：https://stackoverflow.com/questions/50440282/angular-material-table-expand-row-on-column-icon-click