Question

我可以在angular6中使用数据源运行MatTable。但是，当尝试在错误以下添加排序或分页时-

错误错误：未捕获（承诺）：错误：无法解决所有问题 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 ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata （compiler.js：15020）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata （compiler.js：14874）在compile.js：34412 在Array.forEach（）在compile.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 ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata （compiler.js：15020）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata （compiler.js：14874）在compile.js：34412 在Array.forEach（）在compile.js：34411 在Array.forEach（）在JitCompiler.push ../ node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules （compiler.js：34408）在resolvePromise（zone.js：809）在resolvePromise（zone.js：775）在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）在排水微任务队列（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';

Answer 1

我已经看到在关闭表标签后正在使用mat-paginator标签的某个地方像：-

</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

您的错误也说，这是一些语法错误。

角6材料2垫台MatRipple误差

1 个答案: