css - Angular: Hur man filtrerar en dataTable med hjälp av query-parametrar

Jag vill filtrera min tabell med hjälp av frågeparametrar som jag fick från användarens input i en annan komponent.

Jag kan få fram den data som användarna skickar genom inmatningen och skriva ut den till console.log. Men jag vet inte hur jag ska använda den för att filtrera tabellen.

Jag har byggt ett filter men av någon anledning kan jag inte kalla på det.

Detta är mitt filter :

import { Pipe, PipeTransform } from "@angular/core";
import { Container } from "./Entites/Container";

@Pipe({
  name: 'textFilter'
})
export class textFilter implements PipeTransform {

  transform(
    containers : Container[],
    storageSearch?: any,
    clientSearch?: string,
  ): Container[] {

    if (!containers) return [];
    if (!storageSearch) return containers;
    storageSearch = storageSearch.toLocaleLowerCase();
    containers = [...containers.filter(user => user.TAOR_QTSR_EBRI.toLocaleLowerCase() ===  storageSearch)];

    if (!clientSearch) return containers;
    clientSearch = clientSearch.toLocaleLowerCase();
    containers = [...containers.filter(user => user.LQOCH_SHM_LEOZI_QTSR.toLocaleLowerCase() ===  clientSearch)];

  // if (!roleSearch) return users;
  //roleSearch = roleSearch.toLocaleLowerCase();
  //users = [...users.filter(user => user.role.toLocaleLowerCase() ===  roleSearch)];

    return containers;
  }
}

Det här är min komponent ngOnInit jag har några andra filter där, till exempel kryssrutefilter:

  ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {
     //Data
      this.dataSource = new MatTableDataSource(result);
      //Paginator
      this.dataSource.paginator = this.paginator;
      //AutoFilter Form 1st page
      this.clientType = this.route.snapshot.queryParamMap.get('clientType');
      this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
      console.log('The Client name is : '+this.clientType+'  '+'The storage Facility is : '+this.storageType);
      //CheckBox Filter
      this.dataSource.filterPredicate = (data: Container, filter: any) => {
        return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
      };

      this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
        this.dataSource.filter = newFilterValue.join(',');
      });

    });
  }

Det jag vill uppnå är att kunna filtrera tabellen med hjälp av frågeparametrarna.

Svar #1

Vi kan skicka de data som du har mottagit som inmatning (i föräldrakomponenten) till materialtabellens filtreringsfunktion applyFilter inne i barnkomponenten...

relevant föräldra-TS:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  styles: [`.parent{background:lightgreen; padding:2%;}`],
  template: `
  Enter string for filtering: <input type='text' [(ngModel)]='inputStr' />
  <!-- {{inputStr}} -->
  <table-filtering-example [inputStr]='inputStr'>loading</table-filtering-example>
  `,
})
export class AppComponent {
  inputStr: string = '';
  constructor() { }
}

relevant barn TS:

export class TableFilteringExample implements OnInit, OnChanges {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @Input() inputStr:string;

  constructor(){}

  ngOnInit(){}

  ngOnChanges(){
     /* just call the applyFilter button with the data which is passed to your component from it's parent */console.log("(ngOnChanges)this.inputStr:", this.inputStr); 
     this.applyFilter(this.inputStr);
     }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

komplett fungerande stackblitz här