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

我有一张有棱角的材料桌子。当我将表格的html包围在表格中时，表格会呈现，但当单击标题列时，数据不再排序

例如：

并修改它，只需添加。。。演示此行为。示例位于：

是否将控制台登录到此.sort的ngOnInit中

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

---

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

谢谢Danil，您的建议有效，但只有在初始化视图时*ngIf计算为true时才有效

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

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

这是基于以下方面的信息：

完整工作溶液位于：

基于溶液

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

为了在DOM呈现后捕获MatSort组件，请设置{static:false}：

当设置{static：tru}时，角度编译器认为这个“视窗元素”是静态的，因此它只在nGuniIT中一次获得元素。即使触发了*ngIf，也无法捕获MatSort组件

---

参见Angular 8中的@PierreDuc

，我们可以在*ngIf内轻松实现多/单物料表排序和分页。在下面的示例中，我使用ng模板，以便使用*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);
}

---

提交了一个关于Angle Material project的问题-Lol，查看答案谢谢您的简单解释-帮助我：

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