角度材料粘性行不起作用

您好我按照角度材料文档的示例来获取粘性 Headers 行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-header-row'的已知属性

回答(1)

3 years ago

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

检查一下Github issue