Угловая сортировка 5 таблицы данных материала не работает

Question

Поэтому в моем приложении Angular 5 есть рабочая таблица данных Angular Material, но когда я попытался добавить функцию сортировки (на основе официальных документов здесь: https://material.angular.io/components/table/overview и пример здесь: https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.html) Я не могу заставить его работать. Кажется, он добавляет функцию сортировки / стрелку, я могу нажать на нее, но ничего не происходит.

Вот мой HTML:

<div class="container">
  <mat-table #table class="dataTable" *ngIf="showDataForm;else loadingTemplate" [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.id}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="titel">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Titel</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.titel}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="EADDraftingStage">
      <mat-header-cell *matHeaderCellDef mat-sort-header>EADDraftingStage</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.EADDraftingStage}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let item; columns: columnsToDisplay"></mat-row>
  </mat-table>

  <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

<ng-template #loadingTemplate>
  <div>
      <p>Please wait, the data is loading...</p>
      <img src="../../assets/giphy.gif">
  </div>
</ng-template>

<button mat-raised-button class="submitButton" color="accent" (click)="logout()">Logout and remove cookie</button>  

Вот мой TS:

import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { LoginService } from '../Services/login.service';
import { TableService } from '../Services/table.service';
import { EADProcess } from '../Classes/EADProcess';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map, tap, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  showDataForm = false;

  stringArray: string[] = [];
  eadItems: EADProcess[] = [];

  dataSource: MatTableDataSource<EADProcess>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  // which columns the data table needs to display
  columnsToDisplay: string[] = ['id', 'titel', 'EADDraftingStage'];

  constructor(private router: Router,
              private cookieService: CookieService,
              private loginService: LoginService,
              private tableService: TableService,
              private chRef: ChangeDetectorRef) {

  }

  ngOnInit() {
    const $this = this;

    this.getAllEadItems();
  }

  public getAllEadItems() {
    const json: any = {(data omitted for this example)};

    const jsonStringified = JSON.stringify(json);

    this.tableService.getAllEadItems(jsonStringified).subscribe(res => {
      this.convertJsonResultToArray(res);
      this.dataSource = new MatTableDataSource(this.eadItems);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.showDataForm = true;
    });
  }

  public convertJsonResultToArray(res: any) {
    this.stringArray = JSON.parse(res);
    for (const eadItem of this.stringArray) {
      const ead = new EADProcess();
      ead.id = eadItem['GUID'];
      ead.titel = eadItem['Title'];
      ead.EADDraftingStage = eadItem['EADDraftingStage'];

      this.eadItems.push(ead);
    }
  }

  public logout() {
    this.cookieService.delete('logindata');
    this.loginService.setLoggedIn(false);
    this.router.navigateByUrl('/login');
  }

}

Итак, для повторения, моя таблица данных прекрасно работает с отображением данных, но теперь, когда я хотел добавить функциональность сортировки, она, кажется, фактически не сортируется, когда я нажимаю ячейки заголовка, по которым я хочу отсортировать. Кто-нибудь видит проблему?

Answer 1

Ваша проблема - это *ngIf в селекторе мат-таблицы. Если вы проверите эту сортировку, вы увидите, что она не определена. Это работает:

export class TableComponent implements OnInit { 
sort;
@ViewChild(MatSort) set content(content: ElementRef) {
  this.sort = content;
  if (this.sort){
     this.dataSource.sort = this.sort;

  }
}

Я не помню, какой ответ здесь, в SO, я использовал в качестве руководства для решения.

Answer 2

Вероятно, это связано с тем, что ваш сортировщик неправильно привязан к вашему массиву.

Попробуйте использовать тайм-аут, чтобы отложить привязку:

this.convertJsonResultToArray(res);
this.dataSource = new MatTableDataSource(this.eadItems);
setTimeout(() => {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;

});
this.showDataForm = true;

Answer 3

Если у кого-то все еще есть проблема и требуется более чистый подход, они могут реализовать интерфейс ngAfterViewInit и реализовать его. это ловушка жизненного цикла, которая вызывается после того, как Angular полностью инициализировал представление компонента. Ссылаясь на код спрашивающего, TS можно обновить с помощью следующего кода.

import { Component, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit  } from '@angular/core';
...
...

export class TableComponent implements OnInit, AfterViewInit {
   ...
   ...
   ngAfterViewInit() {
      this.dataSource.sort = this.sort; // apply sort after view has been initialized.
   }

} 

Answer 4

export class SomeComponent implements OnInit, AfterViewInit {       
      public rows = [];
      public dataSource = new MatTableDataSource<SomeElement>([]);    

  constructor(public dialogRef: MatDialogRef<SomeComponent>, @Inject(MAT_DIALOG_DATA) public data: ReportData) {}    

  @ViewChild(MatSort) sort;

  ngOnInit(): void {
    this.rows.push({...});    
    this.rows.push({...});    
    this.rows.push({...});    
    this.dataSource = new MatTableDataSource(this.rows);    
  }    

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