typescript - Paginator, Sort và Filter không hoạt động cho dự án angular material

Vì vậy, tôi đã tạo một dự án trên Angular CLI 7 và muốn tích hợp Angular Material vào nó.

Vì vậy, tôi đã thêm các module cho phân trang bảng, mở rộng, lọc, sắp xếp, v.v. Mặc dù tôi đã thêm chúng vào tệp module của ứng dụng. Bộ phân trang, sắp xếp và lọc không hoạt động. Xin vui lòng cho tôi biết vấn đề có thể là gì, tôi đã bị mắc kẹt một thời gian.

Vui lòng xem các tệp dưới đây:

material.module.ts

import { NgModule } from '@angular/core';

import {
  MatCardModule,
  MatInputModule,
  MatButtonModule,
} from '@angular/material';

import {MatTableModule} from '@angular/material/table';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';

const modules = [
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatPaginatorModule,
  MatTableModule,
  MatSortModule,
  MatExpansionModule
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule { }

app.module.ts

import { NgModule } from '@angular/core';

import {
  MatCardModule,
  MatInputModule,
  MatButtonModule,
} from '@angular/material';

import {MatTableModule} from '@angular/material/table';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';

const modules = [
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatPaginatorModule,
  MatTableModule,
  MatSortModule,
  MatExpansionModule
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule { }

dashboard.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  animations: [
    trigger('detailExpand', [
      state('void', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('*', style({ height: '*', visibility: 'visible' })),
      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class DashboardComponent implements OnInit {

  public projectsResponse = {}
  public projectsGL: Project[]

  displayedColumns: string[] = ['bob_id', 'name', 'pod', 'version', 'v_env'];
  dataSource: MatTableDataSource<Project> = new MatTableDataSource<Project>(this.projectsGL);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  isExpansionDetailRow = (index, row) => row.hasOwnProperty('detailRow');

  constructor(private _projectService: ProjectService) { }

  ngOnInit() {
    this._projectService.getProjects().subscribe(data => {
      this.projectsResponse = data;
      this.initializeProjects();
      this.dataSource = new MatTableDataSource<Project>(this.projectsGL);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });

  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}
initializeProjects()
/* code to populate projectGL */

Dashboard.component.html

<div class="example-header">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="projectsGL" matSort>

        <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="bob_id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Bob Id </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.bob_id}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.name}} </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="pod">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Pod </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.pod}} </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="version">
            <mat-header-cell *matHeaderCellDef mat-sort-header> version </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.version}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="v_env">
            <mat-header-cell *matHeaderCellDef mat-sort-header> v-env </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.v_env}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="project-row" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl">
        </mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

<ng-template #tpl let-project>
    <div class="mat-row detail-row" [@detailExpand] style="overflow: hidden">
        The Envirent for {{project.name}} is {{project.env}}
    </div>
</ng-template>

Có vẻ như tôi đã thêm tất cả các mô-đun cần thiết nhưng vẫn không hoạt động được phân trang, sắp xếp và lọc.

Câu trả lời #1

Tìm thấy lỗi,

    <mat-table #table [dataSource]="projectsGL" matSort> 

lẽ ra nên

    <mat-table #table [dataSource]="dataSource" matSort>