0

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

举个例子：https ://material.angular.io/components/table/overview#sorting

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

4

4 回答 4

6

基于解决方案Angular 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组件。

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

于 2019-07-12T22:06:34.997 回答
4

ngOnInit做控制台登录this.sort

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

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

于 2019-01-15T19:28:12.290 回答
1

在 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);
}
于 2019-09-11T01:46:57.737 回答
1

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

于 2019-01-16T13:23:20.960 回答