Липкая строка Angular Material не работает

Здравствуйте, я следую примеру документации 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'

Какая версия @angular/material у вас установлена?

Tim Martens 10.08.2018 12:10

5.1.0 версия @ angular / material

Serxhio Isufaj 10.08.2018 12:13
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
1 569
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Атрибут sticky появился в версии 6.3.0. Вы можете обновить @angular/material и @angular/cdk, чтобы попытаться решить вашу проблему.

Отметьте это Проблема с Github

Я использую angular 5, может ли angular 5 работать с @ angular / material 6.3.0?

Serxhio Isufaj 10.08.2018 14:00

Если вы не можете обновить @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 4+ с функциями поиска, сортировки, разбивки на страницы, а также простоту кодирования и интеграции
Угловой материал MatTableDataSource Серверная разбивка на страницы не работает
Невозможно выполнить привязку к 'dataSource', поскольку это не известное свойство 'table', даже когда модули импортируются
Таблица материалов Angular не отображает данные, пока я не щелкну по ссылкам на страницы
Список выбора углового материала - отключенные параметры могут быть выбраны / отменены с помощью клавиатуры
Angular Reactive Form mat-опция для передачи объекта
Могу ли я применить условный стиль CSS [ngClass] к компоненту материала (mat-checkbox)?
Как вызвать метод из другого компонента после полной загрузки представления (AppComponent)?
Как применить звездный рейтинг при использовании угловатого материала
Источник данных таблицы материалов Angular не привязан правильно / не обновляется, ошибок нет, но ничего не работает