Question

您碰巧知道如何修复第一列并在Angular Material的mat-table中使用水平滚动吗？

非常感谢您的帮助。

Answer 1

为您的组件添加一个方法，我们称其为isSticky(column)。然后将[sticky]绑定到它。有关整个工作示例链接，请参见下文。

HTML

<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">
      <ng-container *ngFor="let column of displayedColumns" matColumnDef={{column}} [sticky]="isSticky(column)">
          <th mat-header-cell *matHeaderCellDef> {{column}} </th>
          <td mat-cell *matCellDef="let element">{{element[column]}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>S
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

TS

isSticky (column: string): boolean {
  return column === 'col1' ? true : false;
}

完整示例

StackBlitz - angular-sticky-table

Answer 2

您应该为此使用mat-table api-粘性值。

<ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
 </ng-container>

请签入官方文档： https://material.angular.io/components/table/examples 示例名称：“带有粘性列的表”

第一列固定在垫子桌子中

2 个答案: