Question

由于我正在使用具有可扩展行的MatTable，因此在扩展时自动滚动到视口的垂直中心会很方便。
Angular是否提供了一些辅助功能来完成此任务，还是我必须自己编写代码？

Answer 1

如果您想滚动到mat-table的中心或特定行，则可以传递该行（在这种情况下，它将在click事件上触发）：

<div class="mat-elevation-z8" #proctable>
<table mat-table [dataSource]="dataSource">
    <!-- Process Sequence No. Column -->
    <ng-container matColumnDef="sequence">
        <th mat-header-cell *matHeaderCellDef> Seq. </th>
        <td mat-cell *matCellDef="let process">
            {{process.sequence}}
        </td>
    </ng-container>

    <!-- Process Name Column -->
    <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let process">
            {{process.name}}</span>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr (click)="scrollToRow(row)" *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
</table>

然后在您的处理程序方法中调用以下代码：

scrollToRow(row) {
  row.scrollIntoView({ behavior: 'smooth' });
}

Angular MatTable-视口内的中心可扩展行

1 个答案: