时间戳

首页 > 解决方案 > Mat-Table 排序标题未呈现

angular - Mat-Table 排序标题未呈现

问题描述

我正在尝试实现一个带有可排序标题的材料表，在遵循教程之后，我有以下内容：

组件文件：

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

该表按预期呈现，分页也是如此，但是排序箭头根本不呈现。

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

穆萨法尔

标签： angular

解决方案

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

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

推荐阅读