Здравствуйте, я следую примеру документации angular material для липкой строки заголовка 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>
Я установил липкое значение true, как в примере, но получаю ошибку. Невозможно привязать к 'matHeaderRowDefSticky', поскольку это не известное свойство 'mat-header-row'
5.1.0 версия @ angular / material
Атрибут sticky
появился в версии 6.3.0. Вы можете обновить @angular/material
и @angular/cdk
, чтобы попытаться решить вашу проблему.
Отметьте это Проблема с Github
Я использую angular 5, может ли angular 5 работать с @ angular / material 6.3.0?
Если вы не можете обновить @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
Какая версия
@angular/material
у вас установлена?