angular - Angular Material 粘性行不起作用

Question

您好，我遵循粘性标题行的角度材料文档示例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，例如示例，但出现错误无法绑定到'matHeaderRowDefSticky'，因为它不是'mat-h​​eader-row' 的已知属性

标签： angularangular-materialangular5

Answer 1

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

检查这个Github 问题