角度6材料2 mat-table MatRipple错误

我可以使用datasource在angular6中运行MatTable . 但是当试图在错误到来之前添加排序或分页时 -

ERROR错误：未捕获（在保证中）：错误：无法解析MatRipple的所有参数：（[object Object]，[object Object]，[object Object]，[object Object]，？） . 错误：无法解析MatRipple的所有参数：（[object Object]，[object Object]，[object Object]，[object Object]，？） . at syntaxError（compiler.js：485）at CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata（compiler.js：15700）at CompileMetadataResolver.push ../ node_modules / @ angular /compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata（compiler.js：15535）at CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata（compiler.js：15020）at at编译器上的CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata（compiler.js：14874）：在Array.forEach（）处的编译器.js：34412处于编译器.js：34411处 . forEach（）at JitCompiler.push ../ node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules(compiler.js:34408）at syntaxError（compiler.js：485）at CompileMetadataResolver.push ../ node_modules /@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata（com piler.js：15700）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata（compiler.js：15535）at CompileMetadataResolver.push ../ node_modules / @ angular / compiler /编译器.js上的CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata（compiler.js：14874）中的esm5 / compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata（compiler.js：15020） ：34412 at Array.forEach（）at compiler.js：34411 at Array.forEach（）at JitCompiler.push ../ node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules(compiler.js:34408） at resolvePromise（zone.js：809）at zone.js：858 at zoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js）at resolvePromise（zone.js：775） ：421）在Zone.push的ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：420）的Object.onInvokeTask（core.js：3662）中 . node_modules / Z在drainMicroTaskQueue（zone.js：595）的one.js / dist / zone.js.Zone.runTask（zone.js：188）

以下是 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';