Question

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

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

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

Answer 1

控制台是否登录ngOnInit中的this.sort

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

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

Answer 2

感谢Danil，您的建议有效，但仅当* ngIf初始化视图时评估为true时才行。

我现在使用的解决方案是：

chr7    94027683    94027701    COL1A2    exon
chr6    31980068    31980074    TNXB    intron

这是基于以下信息：Angular 2 @ViewChild in *ngIf

完整的解决方案，位于：https://stackblitz.com/edit/angular-quzvjv-jzdbb6

Answer 3

基于解决方案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 Compiler认为此@ViewChild元素是静态的，因此它只能在ngOnInit()处一次获得该元素。即使*ngIf被触发仍然无法捕获MatSort组件。

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

Answer 4

在Angular 8中，我们可以轻松地在* ngIf内部实现多个/单个物料表的排序和分页。在下面的示例中，我使用“ ng-template”以便使用* ngIf else显示/隐藏表。

我的样本* ngIf格式

mgmt.getPropertyKey('userId').remove()

下表的格式相同

表1

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

表2

<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中的“＃transactionSort =“ matSort”和#transactionPaginator。还有表1中的“＃snowSort =“ matSort”和#snowPaginator

在TS文件中，配置子视图和其他设置，如下所示。就是这样。

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

角材料表排序-在* ngIf条件中时，数据不排序

4 个答案: