角度mat-table - 粘性标头不起作用-Java 学习之路

我正在使用Angular Material并希望有固定的 Headers . 我已经看到了很多解决方案，但没有一个对我有用 .

通常它应该通过向“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",

任何想法为什么“粘：真”对我不起作用？

提前致谢

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;
}

回复于 2024-04-24T19:27:48+08:00

角度mat-table - 粘性标头不起作用

1 回答

相关问题