Сортировка работает, но данные в таблице не сортируются - Angular Material Table - PullRequest
Новая
       25

Сортировка работает, но данные в таблице не сортируются - Angular Material Table

1 голос
/ 27 марта 2020

По какой-то причине сортировка мата на поверхности приводит к перемещению стрелок, поэтому сортировка должна работать, но она не сортируется ...

Вот HTML: 

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>
      <!-- name -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ model.fields.name.label }}</th>
        <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
      </ng-container>

   <!-- ... -->
  </table>
</div>

В моем component.ts: 

import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export class DevizaListComponent implements OnInit {
  dataSource = new MatTableDataSource<DevizaInterface>(devizas);
  devizas: DevizaInterface[] = [
    {
      name: 'dollar',
      code: 'USD' ,
    },
    //...
    //...
  ];
  //...

  @ViewChild(MatSort, { static: true }) sort: MatSort;


  //...

  constructor() { }

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}

Я импортировал в свой app.module.ts это: 

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatTableModule,
    MatSortModule,
  ],
})

Консоль не отображает сообщение об ошибке. В чем причина проблемы, что на интерфейсе появляются стрелки для сортировки, но таблица сортируется не так, как должна?

1 Ответ

0 голосов
/ 28 марта 2020

Скорее всего, this.sort еще не определено, когда вы назначаете его this.dataSource.sort внутри ngOnInit. Поэтому dataSource не получает события сортировки. Это может быть связано со структурной директивой (то есть *ngIf), которая только условно включает таблицу в шаблон.

Проблема может быть решена путем изменения значения static на @ViewChild и назначения вместо него sort внутри ngAfterViewInit ловушки живого цикла. Пожалуйста, обратитесь к документации Angular о жизненном цикле компонента . 

export class DevizaListComponent implements AfterViewInit {
  ...

  @ViewChild(MatSort, { static: false}) sort: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

Вам также следует изменить порядок учеников и создать dataSource после инициализации devizas.

...