Angular mat-table - 粘性表头无效

Question

我正在使用Angular Material，并希望拥有固定的表头。

我已经看过很多解决方案，但都不适用于我。

通常可以通过在"mat-header-row *matHeaderRowDef="中添加"sticky: true"来实现，但对我来说却行不通...

我检查了一下我的Angular Material和Angular CDK版本，它们是最新的。

html:

<mat-table #table [dataSource]="dataSource">

  <ng-container matColumnDef="fromTo">
    <mat-header-cell *matHeaderCellDef> Absender/Empfänger </mat-header-cell>
    <mat-cell *matCellDef="let entry">{{entry.customer.shownName}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="forwarder">
    <mat-header-cell *matHeaderCellDef> Spediteur </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.forwarder.shownName}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="binType">
    <mat-header-cell *matHeaderCellDef> BehälterTyp </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.bin.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="inboundQty">
    <mat-header-cell *matHeaderCellDef> Eingang </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.inboundQty}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="outboundQty">
    <mat-header-cell *matHeaderCellDef> Ausgang </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.outboundQty}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="comment">
    <mat-header-cell *matHeaderCellDef> Kommentar </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.comment}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="user">
    <mat-header-cell *matHeaderCellDef> Benutzer </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.user.email}} </mat-cell>
  </ng-container>

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

package.json:

  "@angular/cdk": "^7.0.0",
    "@angular/material": "^7.0.0",

请问为什么我的"sticky:true"无法正常工作？

提前致谢。

- Chris

---

表格外面有没有任何 div？ - Sooriya Dasanayake

Answer 1

尝试这样做... 添加 <div class="example-container><div>

<div class="example-container >
  <mat-table #table [dataSource]="dataSource">

  <ng-container matColumnDef="fromTo">
    <mat-header-cell *matHeaderCellDef> Absender/Empfänger </mat-header-cell>
    <mat-cell *matCellDef="let entry">{{entry.customer.shownName}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="forwarder">
    <mat-header-cell *matHeaderCellDef> Spediteur </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.forwarder.shownName}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="binType">
    <mat-header-cell *matHeaderCellDef> BehälterTyp </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.bin.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="inboundQty">
    <mat-header-cell *matHeaderCellDef> Eingang </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.inboundQty}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="outboundQty">
    <mat-header-cell *matHeaderCellDef> Ausgang </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.outboundQty}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="comment">
    <mat-header-cell *matHeaderCellDef> Kommentar </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.comment}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="user">
    <mat-header-cell *matHeaderCellDef> Benutzer </mat-header-cell>
    <mat-cell *matCellDef="let entry"> {{entry.user.email}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

请添加以下CSS：

.example-container {
  height: 400px;
  overflow: auto;
}

- Sooriya Dasanayake

---

谢谢，现在标题已经固定了。但是条目只填充了半页。我猜高度：600像素会起作用（只需要测试一下如果我使用另一个屏幕/设备（例如手机）它看起来像什么）。 - Chris

尝试使用 height: 50vh; - Sooriya Dasanayake