Question

我想在Angular Material 6的MatTable上应用抠像过滤器。创建表时，我使用了角度cli并重命名了该类。现在，过滤器无法正常工作，因为找不到“过滤器”功能。

这是组件的HTML

<div id="react-reporting"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="http://localhost:8080/dist/bundle.js"></script>

TS

<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Nro Empresa">

这里是数据源

export class TableSegundaGrillaComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource: TableSegundaGrillaDataSource;


displayedColumns = ['ficha', 'cuit', 'razonSocial', 'deuda', 
'deudaRealEstadoServicioId',
'deudaEstimadaEstadoServicioId'];
token: string;
dataGrilla: any;

constructor(private _configService: ConfigService, private http: Http, 
private router: Router,
          private grillasService: GestionEmpresasGrillasService) {
this.token = localStorage.getItem('TOKEN');
}

ngOnInit() {
this.bringData();
// this.dataSource = new TableSegundaGrillaDataSource(this.paginator, 
this.sort);
}

bringData() {
const dto: GrillaCompleta = new class implements GrillaCompleta {
  cargaExcepcion: number;
  cuit: number;
  descripcion: string;
  deudaEstimada: number;
  deudaEstimadaEstadoServicioId: { id: number; descripcion: string; 
  porcentajeDesde: number; porcentajeHasta: number };
  deudaEstimadaTipoGestionId: { id: number; descripcion: string; 
  porcentajeDesde: number; porcentajeHasta: number };
  deudaReal: number;
  deudaRealEstadoServicioId: { id: number; descripcion: string; 
  porcentajeDesde: number; porcentajeHasta: number };
  deudaRealTipoGestionId: { id: number; descripcion: string; 
  porcentajeDesde: number; porcentajeHasta: number };
  ejecutivo: number;
  empresaId: number;
  interesComercial: string;
  razonSocial: string;
  };
  console.log('Por entrar al service');
  this.dataGrilla = this.grillasService.segundaGrilla(dto).subscribe(
  result => {
    this.dataGrilla = result;
    console.log('grilla: ' + this.dataGrilla);
    this.dataSource = new TableSegundaGrillaDataSource(this.paginator, 
  this.sort, this.dataGrilla);
  }
  );

}

applyFilter(filterValue: any) {
  console.log(filterValue);
  this.dataSource.data = filterValue.trim().toLowerCase();

}

我只想在材料的数据表中添加一些keyup过滤器。如果有人知道如何添加材料的“过滤器”选项，我将不胜感激。

谢谢大家！

使用自定义类名称过滤Material DataTable

0 个答案: