Mat Table排序标头未呈现

Question

我正在尝试实现一个具有可排序标题的材料表，经过以下教程，我得到了以下内容：

组件文件：

<mat-table [dataSource]="quotes" matSort matSortActive="idCpQuote" matSortDirection="asc" matSortDisableClear class="mat-elevation-z8">
<ng-container matColumnDef="idCpQuote">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID. </mat-header-cell>
<mat-cell *matCellDef="let quote"> {{quote.idCpQuote}} </mat-cell>
</ng-container>
</mat-table>
<mat-paginator [length]="total" [pageSize]="20" [pageSizeOptions]="[20, 50, 100]"></mat-paginator>

在component.ts文件中：

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { QuoteService } from '@app/services/quote.service';
import { first, tap} from 'rxjs/operators';
import { QuoteDataSource } from '@app/services/quote.datasource';
import { QuoteResolver } from '@app/services/quote.resolver';
import { MatPaginator } from '@angular/material/paginator';
import { ActivatedRoute } from '@angular/router';
import { QuoteListMeta } from '@app/models/quote.list.meta';
@Component({
selector: 'app-quotes-list',
templateUrl: './quotes-list.component.html',
styleUrls: ['./quotes-list.component.scss'],
providers: [ QuoteService ]
})
export class QuotesListComponent implements AfterViewInit, OnInit {
quoteListMeta: QuoteListMeta;
quotes = null;
displayedColumns = ['idCpQuote', 'name', 'email', 'dateAdd'];
dataSource: QuoteService;
total: number;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private route: ActivatedRoute, private quoteService: QuoteService) {
}
ngOnInit(): void {
this.route.data.subscribe((data) => {
this.total = data.quoteListMeta.total;
});
this.dataSource = this.quoteService;
this.dataSource.getQuotes('', 'asc', 0, 20).subscribe(
response => {
this.quotes = response;
}
);
}
ngAfterViewInit() {
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
this.paginator.page
.pipe(
tap(() => this.loadQuotesPage())
)
.subscribe();
}
loadQuotesPage() {
this.dataSource.getQuotes('', 'asc', this.paginator.pageIndex, this.paginator.pageSize).subscribe(
response => {
this.quotes = response;
}
);
}
}

物料模块已导入到我的app.module.ts.中

该表按预期进行渲染，分页也按预期进行，但是排序箭头根本不进行渲染。

我就是看不出我做错了什么。

Musaffar

Answer 1

最终发现，通过使用"；ng构建"；解决了这个问题，尽管最初应用程序是在每次更改时使用ng-serve-open重新编译的，但这对我的情况来说还不够。

如果有人遇到同样的问题，希望这能有所帮助。