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

Question

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

Взяв пример из: https://material.angular.io/components/table/overview#sorting

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

Answer 1

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

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

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

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

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

Answer 2

База на основе решения Угловая 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.

См. https://stackoverflow.com/a/56359612/11777581 от @ PierreDuc

Answer 3

Консоль входит в систему ngOnInit из this.sort

Angular не перехватил MatSort компонент, так как на этапе инициализации NgIf не обрабатывал шаблон.

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