Я могу запустить MatTable в angular6 с источником данных. Однако при попытке добавить сортировку или разбиение на страницы ниже появляется ошибка -
Ошибка: ошибка (в обещании): ошибка: не удается разрешить все
параметры для MatRipple: ([объект объекта], [объект объекта], [объект
Объект], [объект Объект],?). Ошибка: не удается разрешить все параметры для
MatRipple: ([объект объекта], [объект объекта], [объект объекта], [объект
Объект],?).
в синтаксической ошибке (compiler.js: 485)
в CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata
(compiler.js: 15700)
в CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata
(compiler.js: 15535)
на странице CompileMetadataResolver.push ../
(compiler.js: 15020)
в CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata
(compiler.js: 14874)
на compiler.js: 34412
в Array.forEach ()
на compiler.js: 34411
в Array.forEach ()
в JitCompiler.push ../ node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules
(compiler.js: 34408)
в синтаксической ошибке (compiler.js: 485)
в CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata
(compiler.js: 15700)
в CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata
(compiler.js: 15535)
на странице CompileMetadataResolver.push ../
(compiler.js: 15020)
в CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata
(compiler.js: 14874)
на compiler.js: 34412
в Array.forEach ()
на compiler.js: 34411
в Array.forEach ()
в JitCompiler.push ../ node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules
(compiler.js: 34408)
at resolPromise (zone.js: 809)
at resolPromise (zone.js: 775)
at zone.js: 858
в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask
(zone.js: 421)
в Object.onInvokeTask (core.js: 3662)
в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask
(zone.js: 420)
в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 188)
при сливе MicroTaskQueue (zone.js: 595)
Ниже приведен пример кода component.hml
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="companyCode">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Company Code </th>
<td mat-cell *matCellDef="let row"> {{row.companyCode}} </td>
</ng-container>
<ng-container matColumnDef="companyName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.companyName}} </td>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</table>
Ниже приведен пример кода component.ts
import {MatDialog, MatPaginator,MatSort, MatTableDataSource} from '@angular/material';
export class GroupComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private groupService: GroupService){
this.displayedColumns = ['companyCode', 'companyName'];
}
ngOnInit(){
this.getGroups();
}
getGroups(): void {
this.groupService.getAllGroups().subscribe((groups: any)=>{
this.dataSource = new MatTableDataSource(groups.value.data.companyProfiel);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
}
Ниже импортированы модули в коде module.ts
import {
MatButtonModule, MatDialogModule, MatIconModule, MatInputModule, MatPaginatorModule, MatSortModule,
MatTableModule, MatToolbarModule,
} from '@angular/material';