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

Question

У меня есть таблица угловых матов, которая правильно отображает данные.Я пытаюсь добавить функцию сортировки с помощью mat-sort.Прямо сейчас маленькие стрелки появляются рядом с каждым столбцом, но таблица вообще не реагирует на нажатие.Многие другие проблемы SO с аналогичными проблемами были решены путем вывода таблицы за пределы *ngIf или установки datasource позднее в жизненном цикле.Я не думаю, что в моем коде есть такие проблемы, хотя я могу ошибаться.

table.component.ts

import { Component, Input, SimpleChanges, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';

import { Data } from '...';

@Component({
    ...
})

export class WorkflowManagerTableComponent{

    @Input() data: Data[];
    @Input() title: string;
    @ViewChild(MatSort) sort: MatSort;
    displayedColumns: string[] = ['select'];
    dataProps: string[] = [];

    ngOnChanges(changes: SimpleChanges) {
        console.log("ngOnChanges")
        this.data = changes.data.currentValue;
        if (this.data) {
            this.dataSource = new MatTableDataSource(this.data);
            this.dataSource.sort = this.sort;
            this.dataArray = this.data;
            for (var property in this.data[0]){
                if(this.data[0].hasOwnProperty(property)){
                    this.dataProps.push(property)
                }
            }
            this.displayedColumns = this.displayedColumns.concat(this.dataProps);
        }
    }

    public dataArray: Data[];
    public dataSource: MatTableDataSource<Data>;1
}

table.component.html

<table mat-table matSort [dataSource]="dataArray" class="mat-elevation-z8">
    <ng-container *ngFor="let prop of dataProps" matColumnDef="{{prop}}">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> 
            {{prop}}
         </th>
         <td mat-cell *matCellDef="let data"> {{data[prop]}} </td>
     </ng-container>
</table>

Как я могу получитьковрик сортировать на работу?Спасибо,

Answer 1

Вы должны иметь и теги в последнем разделе таблицы.
Например:
... <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
Это определяет строки заголовка и строки для содержимого. Если у вас его нет, он не может распознать заголовки, тогда, конечно, сортировка не будет работать, даже если в ней есть mat-sort-header.
Взгляните на первый пример на сайте угловых материалов для таблицы. https://material.angular.io/components/table/examples

Answer 2

Я пытаюсь следовать приведенному вами примеру кода.во-первых, вам не нужно присваивать изменение currentValue свойству ввода, оно будет установлено для вас.

Если вы пытаетесь отсортировать таблицу данных материала, поэтому я ожидаю увидеть функцию сортировки вкомпонент.Angular не будет сортировать вещи для вас.Эта функция сортировки будет вызываться в функции подписки для свойства matSort viewChiled после вызова sortChange.Было бы что-то вроде этого:

this.sort.sortChange.subscribe(() => {
   // sorting implantation goes here; 
});

Вы можете найти четкие примеры в documentmentatiion .

Еще одна вещь, которую вы должны отписаться для каждой подписки, которую вы имеете в компонентекогда вы закончите с этим.Я надеюсь, что это ответ на ваш вопрос.