Angular material 与 table 的对话

Question

我想在对话框中放一个 material table 这样 table header 就不能滚动了，但是 table 的内容将是可滚动的，像这样：

我知道，该对话框支持“mat-dialog-content”，但我不知道如何将其添加到 tbody。

<table mat-table [dataSource]="ordersTableSource" [hidden]="isLoading || !ordersTableSource.data.length">

    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>{{ 'carat-orders-dialog.table.id' | translate }}</th>
        <td mat-cell *matCellDef="let order">
            <span>...</span>
        </td>
    </ng-container>

    <ng-container matColumnDef="location">
        <th mat-header-cell *matHeaderCellDef>{{ 'carat-orders-dialog.table.location' | translate }}</th>
        <td mat-cell *matCellDef="let order">
            <span>...</span>
        </td>
    </ng-container>

    <ng-container matColumnDef="customer">
        <th mat-header-cell *matHeaderCellDef>{{ 'carat-orders-dialog.table.customer' | translate }}</th>
        <td mat-cell *matCellDef="let order">
            <span>...</span>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="row" mat-row *matRowDef="let order; columns: displayedColumns;"></tr>
</table>

Answer 1

您可以在某个 div 容器中输入 table 组件并设置为容器样式。但是你必须知道，这个容器的父元素必须有“position: relative”

.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

如果您要创建 stackblitz 演示，我可以提供帮助，我将 post 在这里介绍如何解决您的问题

Answer 2

Angular Material 解决方案是编辑您的 Header 行以具有 sticky 参数：

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

作为参考，请参阅 Material 网站上的示例：https://material.angular.io/components/table/examples#table-sticky-header

如果您有多个 header 行，您可以为每个 Header 行指定 sticky 参数。

Angular material 与 table 的对话

Angular material dialog with table

angular-material

angular