Угловая сортировка таблицы материалов - данные не сортируются, когда они находятся внутри условия *ngIf

Question

У меня есть таблица угловых материалов. Когда я окружаю HTML для таблицы с <div *ngIf="true"> таблица отображается, но данные больше не сортируются при нажатии на столбец заголовка.

Взять пример из: https://material.angular.io/components/table/overview

И изменив его, просто добавив <div *ngIf="true"> ... </div> демонстрирует это поведение. Пример находится по адресу: https://stackblitz.com/edit/angular-quzvjv

Answer 1

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

В Angular 8, @ViewChild декоратору нужен второй аргумент {static: true|false}

Для того, чтобы поймать MatSort компонент после рендеринга DOM, установите {static:false}:

export class TableSortingExample{

    sort;
    @ViewChild(MatSort, {static: false}) set content(content: ElementRef) {
        this.sort = content;
        if (this.sort){
           this.dataSource.sort = this.sort;
        }
    }
}

Когда установлено {static : true}Angular Compiler учитывает это @ViewChild элемент является статическим, поэтому он получает элемент только один раз в ngOnInit(), Даже если *ngIf срабатывает до сих пор не могу поймать MatSort составная часть.

См. /questions/48447100/kak-mne-ispolzovat-novuyu-staticheskuyu-optsiyu-dlya-viewchild-v-angular-8/48447114#48447114 от @PierreDuc

Answer 2

У консоли войти в систему ngOnInit из this.sort

Угловой не поймал MatSort компонент на этапе инициализации NgIf не обработал шаблон.

+ Изменить ngOnInit в ngAfterViewInit и это будет работать, как ожидалось.

Answer 3

Спасибо, Данил, ваше предложение сработало, но только когда *ngIf оценивается как true, когда представление инициализируется.

Решение, которое я сейчас использую:

@ViewChild(MatSort) set content(sort: MatSort) {
    this.dataSource.sort = sort;
}

Это основано на информации из: Angular 2 @ViewChild в *ngIf

Полное рабочее решение по адресу: https://stackblitz.com/edit/angular-quzvjv-jzdbb6

Answer 4

В Angular 8 мы можем легко добиться сортировки нескольких / единственных таблиц материалов и разбиения на страницы внутри *ngIf. В приведенном ниже примере я использую "ng-template", чтобы показать / скрыть таблицу с помощью *ngIf else.

Мой образец формата *ngIf

   <div *ngIf="!isDataLoadedFromApi; else loadTransactions">No data to display</div>

Ниже таблицы в таком же виде

Таблица 1

<ng-template #loadCases>
<table mat-table [dataSource]="snowDataSource" #snowSort="matSort" matSort class="mat-elevation-z3 snow-table">
    <mat-paginator class="mat-elevation-z3" #snowPaginator [pageSizeOptions]="[3, 10, 20]" showFirstLastButtons>
    </mat-paginator></ng-template>

Таблица 2

<ng-template #loadTransactions>
<table mat-table [dataSource]="transactionDataSource" #transactionSort="matSort" matSort
    class="mat-elevation-z3 transaction-table">
    <mat-paginator class="mat-elevation-z3" #transactionPaginator [pageSizeOptions]="[3, 10, 20]"
        showFirstLastButtons>
    </mat-paginator></ng-template>

Проверьте "#transactionSort="matSort"и #transactionPaginator в таблице 2. Также"#snowSort="matSort" и #snowPaginator в таблице 1

В файле TS настройте вид ребенка и другие параметры, как показано ниже. Вот и все.

@ViewChild('snowSort', { static: false }) set matSnowSort(snowSort: MatSort) {
this.snowSort = snowSort;
if (this.snowDataSource !== null && this.snowDataSource !== undefined) {
    this.snowDataSource.sort = this.snowSort;
}}

@ViewChild('snowPaginator', { static: false }) set matSnowPaginator(snowPaginator: MatPaginator) {
this.snowPaginator = snowPaginator;
if (this.snowDataSource !== null && this.snowDataSource !== undefined) {
    this.snowDataSource.paginator = this.snowPaginator;
}}

@ViewChild('transactionSort', { static: false }) set matTransactionSort(transactionSort: MatSort) {
this.transactionSort = transactionSort;
if (this.transactionDataSource !== null && this.transactionDataSource !== undefined) {
    this.transactionDataSource.sort = this.transactionSort;
}}

@ViewChild('transactionPaginator', { static: false }) set matTransactionPaginator(transactionPaginator: MatPaginator) {
this.transactionPaginator = transactionPaginator;
if (this.transactionDataSource !== null && this.transactionDataSource !== undefined) {
    this.transactionDataSource.paginator = this.transactionPaginator;
}}

private transactionSort: MatSort;
private transactionPaginator: MatPaginator;
private snowSort: MatSort;
private snowPaginator: MatPaginator;
payIdTransactions: TLItem[];
snowCases: Cases[];
transactionDataSource: MatTableDataSource<TLItem>;
snowDataSource: MatTableDataSource<Cases>;

private getTransactions(startDate: string, endDate: string) {
    this.payIdTransactions = results.getTransactionsResponse.TLItems.TLItem;
    this.transactionDataSource = new MatTableDataSource(this.payIdTransactions);
}
private getSnowCases(startDate: string, endDate: string) {
    this.snowCases = results.getCasesResponse.cases;
    this.snowDataSource = new MatTableDataSource(this.snowCases);
}