Angular 分页器、排序和过滤器不适用于角材料项目

因此，我在Angular CLI 7上创建了一个项目，并希望将Angular材质集成到其中

因此，我添加了用于表分页、扩展过滤器排序等的模块。 即使我已经将它们添加到应用程序模块文件中。分页器排序和过滤器不工作。请你告诉我这里有什么问题，被困了一段时间

请查找以下文件：

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 { }

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 { }

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 */

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“@angular/animations”导入{动画、状态、样式、转换、触发器}；
从“@angular/material”导入{MatTableDataSource，MatPaginator，MatSort}；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.css']，
动画：[
触发器（'detailExpand'[
状态（'void'，样式（{height:'0px'，minHeight:'0'，可见性：'hidden'}）），
状态（'*'，样式（{height:'*'，可见性：'visible'}）），
过渡（'void*'，动画（'225ms立方贝塞尔（0.4,0.0,0.2,1）），
]),
],
})
导出类DashboardComponent实现OnInit{
公共项目响应={}
公共项目：项目[]
displayedColumns:string[]=['bob_id'，'name'，'pod'，'version'，'v_env']；
dataSource:MatTableDataSource=新MatTableDataSource（this.projectsGL）；
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
isExpansionDetailRow=（索引，行）=>row.hasOwnProperty（'detailRow'）；
构造函数（私有的_projectService:projectService）{}
恩戈尼尼特（）{
此._projectService.getProjects（）.subscribe（数据=>{
this.projectsResponse=数据；
this.initializeProjects（）；
this.dataSource=新MatTableDataSource（this.projectsGL）；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
});
}
applyFilter（filterValue:string）{
filterValue=filterValue.trim（）；//删除空白
filterValue=filterValue.toLowerCase（）；//数据源默认为小写匹配
this.dataSource.filter=filterValue；
}
}
初始化项目（）
/*用于填充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>

鲍勃身份证
{{project.bob_id}
名称
{{project.name}
豆荚
{{project.pod}
版本
{{project.version}
v-env
{{project.v_env}}
{{project.name}的环境是{{project.env}

我似乎已经添加了所有需要的模块，但分页器、排序和筛选器仍不工作。

发现错误

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

应该是

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

我发现材料网站上的示例不完整。在这种情况下，如果您至少看一下api，我认为需要实现

sortData

。我计划花今天的时间通过工作，找出遗漏的内容，所以如果你找到答案，请张贴。包括

BrowserAnimationsModule

一直是我错过的一个。你能用这个创建stackblitz示例吗issue@AndrewAllen我已经添加了BrowserAnimationsModule，还没有找到解决方案yetsorry@AmitBaranes您想要完整的项目还是所需的文件？我在这里使用了以下代码：