Angular Material 粘性行不起作用答案

【问题标题】：Angular Material sticky row don't workAngular Material 粘性行不起作用
【发布时间】：2019-01-17 21:51:09
【问题描述】：

您好，我按照粘性标题行的角度材料文档的示例https://material.angular.io/components/table/overview#sticky-rows-and-columns 但不要为我工作。这是我的html代码

<div class="content mat-white-bg">
    <mat-table #table [dataSource]="dataSource"
       matSort matSortDirection="asc" matSortDisableClear>

      <ng-container matColumnDef="Code">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Kodi' | translate}}">
          </mat-form-field>
          <button (click)="sortTable($event.target.value)" mat-button class="mat-icon-button ">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client">
          <p class="text-truncate ">
            {{client.Code}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="FirstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Emri' | translate}}">
          </mat-form-field>
          <button (click)="sortTable($event.target.value)" mat-button class="mat-icon-button">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client">
          <p class="text-truncate ">
            {{client.FirstName}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Address">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Adresa' | translate}}">
          </mat-form-field>
          <button (click)="sortTable($event.target.value)" mat-button class="mat-icon-button">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>
          <p class="text-truncate ">
            {{client.Address}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="City">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Qyteti' | translate}}">
          </mat-form-field>
          <button (click)="sortTable()" mat-button class="mat-icon-button ">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>
          <p class="text-truncate ">
            {{client.City}}
          </p>
        </mat-cell>
      </ng-container>


      <ng-container matColumnDef="Email">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Email">
          </mat-form-field>
          <button (click)="sortTable()" mat-button class="mat-icon-button">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>
          <p class="email text-truncate">
            {{client.Email}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Tel">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Tel">
          </mat-form-field>
          <button (click)="sortTable()" mat-button class="mat-icon-button ">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>

          {{client.Tel}}

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

我已将 sticky 设置为 true，例如示例，但出现错误 Can't bind to 'matHeaderRowDefSticky' 因为它不是 'mat-header-row' 的已知属性

【问题讨论】：

你运行的是什么版本的@angular/material？
@angular/material 的 5.1.0 版本

标签： angular angular-material angular5

【解决方案1】：

sticky 属性是在 6.3.0 版中引入的。您可以升级@angular/material 和@angular/cdk 来尝试解决您的问题

查看Github issue

【讨论】：

我正在使用 Angular 5，Angular 5 可以与 @angular/material 6.3.0 一起使用吗？

【解决方案2】：

如果您无法将@angular/material 升级到较新的版本，这里有一个简单的css 实现，我用它来获取@angular/material 版本5.1.0 中的粘性标题行：

.mat-header-row--sticky {
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 100;
}

然后在模板中将mat-header-row--sticky 类添加到mat-header-row 元素中：

<mat-header-row *matHeaderRowDef="displayedColumns" class="mat-header-row--sticky"></mat-header-row>

StackBlitz 演示：https://stackblitz.com/edit/angular-62cpzh

【讨论】：