Angular Material Table Sorting - Data Doesn't sort when inside a *ngIf condition

问题

I have a Angular Material Table. When I surround html for the table with a <div *ngIf="true"> the table renders but the data no longer sorts when clicking on the header column.

Taking the example from: https://material.angular.io/components/table/overview#sorting

And modifying it, just by adding the <div *ngIf="true"> ... </div> demonstrates this behavior. Example is at: https://stackblitz.com/edit/angular-quzvjv

回答1:

Do the console log in ngOnInit of this.sort

Angular didn't catch MatSort component as on init phase NgIf didn't process the template.

Change ngOnInit to ngAfterViewInit and it will work as expected.

回答2:

Base on the solution Angular 5 Material Data Table sorting not working

In Angular 8, the @ViewChild decorator need a second argument {static: true|false}

In order to catch MatSort component after DOM rendered, set {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;
        }
    }
}

When set {static : true}, Angular Compiler consider this @ViewChild element is static, so it only obtain the element one time at ngOnInit(). Even if *ngIf triggered still can't catch the MatSort component.

See https://stackoverflow.com/a/56359612/11777581 by @PierreDuc

回答3:

Thanks Danil, your suggestion worked, but only when the *ngIf evaluated to true when the view of initialized.

The solution I am now using is:

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

This was based on information from: Angular 2 @ViewChild in *ngIf

Full working solution at: https://stackblitz.com/edit/angular-quzvjv-jzdbb6

回答4:

In Angular 8, We can easily achieve multiple/single material table sorting and paging inside *ngIf. In the below example I am using "ng-template" in order to show/hide the table using *ngIf else.

My Sample *ngIf format

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

Below tables are in the same form

Table-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>

Table-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>

Check the "#transactionSort="matSort" and #transactionPaginator in Table-2. Also "#snowSort="matSort" and #snowPaginator in Table-1

In the TS file configure view child and other settings like below. That's it.

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

来源：https://stackoverflow.com/questions/54205379/angular-material-table-sorting-data-doesnt-sort-when-inside-a-ngif-condition

标签

angular

angular-material

angular-material-table