因此我在Angular CLI 7上创建了一个项目,并希望将角材料集成到其中。
因此,我为表分页扩展过滤器排序等添加了模块。 即使我已将它们添加到应用程序模块文件中。分页器排序和过滤器不起作用。请您告诉我这里可能是什么问题,卡住了一段时间。
请找到以下文件:
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>
我似乎已经添加了仍需要的所有模块,但分页器,排序和过滤器仍无法正常工作。
答案 0 :(得分:1)
发现错误
<mat-table #table [dataSource]="projectsGL" matSort>
应该是
<mat-table #table [dataSource]="dataSource" matSort>