角度垫表试图实现垫排序答案

【问题标题】：angular mat-table trying to implement mat-sort角度垫表试图实现垫排序
【发布时间】：2019-11-19 10:37:31
【问题描述】：

我正在尝试在 mat-table 上实现 mat-sort，但在尝试初始化 mat 排序功能时遇到了一些问题。排序属性未定义：

垫桌：

<mat-table matSort #sort1="matSort" matSortActive="id" matSortDirection="asc" matSortDisableClear
                                               #table
                                               [dataSource]="dataSource">
                                        <ng-container matColumnDef="statusName">
                                            <mat-header-cell *matHeaderCellDef mat-sort-header="customer.statusName">Status Name</mat-header-cell>
                                            <mat-cell *matCellDef="let customer">
                                                {{customer.statusName}}
                                            </mat-cell>
                                        </ng-container>
                                    </mat-table>

组件代码：

@ViewChild('sort1', { static: true }) sort: MatSort;
ngOnInit(): void {

    const sortSubscription = this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
    this.subscriptions.push(sortSubscription);

    this.dataSource = new InvoiceStatusDataSource(this.invoiceStatusService);

    this.loadItems(true);
}

在 loadItems 我有这个：

 loadItems(firstLoad: boolean = false) {
        const queryParams = new QueryParamsModel(
            {},
            this.sort.direction,
            this.sort.active,
            this.paginator.pageIndex,
            this.paginator.pageSize
        );
        this.dataSource.loadItems(queryParams);
        this.selection.clear();
    }

正如您在顶部的屏幕截图中所见，排序属性未定义。我是否需要编写一些额外的代码来初始化该属性？

【问题讨论】：

标签： angular angular-material mat-table angular-material-table

【解决方案1】：

您的MatTable 是否被封装在任何ngIf 中？如果为 true，您必须在 ngAfterViewInit 中设置排序，因为您的表格未呈现并且您的“MatSort”不存在，或者您可以添加一个设置器，当它存在时设置您的 MatSort。

@ViewChild('sort1', { static: false})set matSort(value: MatSort){
  if(this.dataSource && value) {
    this.dataSource.sort = value;
  }
}
```

【讨论】：