Блог

У меня есть два угловых компонента, один из которых представляет собой целую страницу, которая загружает другой компонент, представляющий собой просто таблицу.

Таблица загружается через <app-detections-table [dataSource]="dataSource"></app-detections-table> in detections.component.html .
In detections-table.component.html , который я добавил

 <table
mat-table
[dataSource]="dataSource"
#sort
matSort="sort"
>
 

и <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th> для каждого из заголовков столбцов.
В detections-table.component.ts я добавил

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

Теперь я получаю стрелки сортировки в таблице, но ничего не происходит, когда я нажимаю на них.
Если я удалю передачу источника данных из detections.component.html компонента table и просто использую объект JSON в компоненте table, тогда он работает, как ожидалось, поэтому я предполагаю, что сортировка in detections-table.component.ts «слишком поздняя», поэтому я попытался добавить this.dataSource.sort = this.sort в конец ngOnInit() in detections.component.ts , но это также ничего не дало.
У кого-нибудь есть совет? Спасибо!

У меня была аналогичная проблема с mat-table, и я решил ее, используя параметр setter для @Input и загружая свойства таблицы в отдельной функции.

 tableData = new MatTableDataSource([]);

@Input() set dataSource(value: any[]) {
    if(value) {
    this.loadTable(value);
    }
}
 

И для загружаемой таблицы вы могли бы сделать что-то вроде этого:

 loadTable(data: any[]) {
    this.tableData = new MatTableDataSource(data);
    this.tableData.sort = this.sort;
}
 

В этом примере переменная «tableData» становится источником данных, который вы используете для таблицы, так что:

 <table
mat-table
[dataSource]="dataSource"
#sort
matSort="sort"
>
 

Станет ли это:

 <table
mat-table
[dataSource]="tableData"
#sort
matSort="sort"
>
 

Надеюсь, это решит вашу проблему!