角度材料表排序 - 数据在 *ngIf 条件内不排序

Question

我有一个 Angular 材质表。当我用<div *ngIf="true"> 包围表格的html 时，表格会呈现，但单击标题列时数据不再排序。

以https://material.angular.io/components/table/overview#sorting为例

并修改它，只需添加<div *ngIf="true"> ... </div> 即可演示此行为。示例在：https://stackblitz.com/edit/angular-quzvjv

Answer 1

基于Angular 5 Material Data Table sorting not working的解决方案

在 Angular 8 中，@ViewChild 装饰器需要第二个参数 {static: true|false}

为了在DOM渲染后捕获MatSort组件，设置{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 编译器认为这个@ViewChild 元素是静态的，所以它只在ngOnInit() 处获取元素一次。即使*ngIf 触发仍然无法捕获MatSort 组件。

参见@PierreDuc 的https://stackoverflow.com/a/56359612/11777581

Answer 2

控制台登录ngOnInit of this.sort

Angular 没有捕获 MatSort 组件，因为在初始化阶段 NgIf 没有处理模板。

将ngOnInit 更改为ngAfterViewInit，它将按预期工作。

Answer 3

感谢 Danil，您的建议有效，但仅当视图初始化时 *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 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>

检查表 2 中的“#transactionSort="matSort" 和 #transactionPaginator。 还有表 1 中的“#snowSort="matSort" 和 #snowPaginator

在 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);
}