CSS - انگولار: چگونه یک دادهجدول را با استفاده از پارامترهای پرسوجو فیلتر کنیم

من میخواهم جدول خود را با استفاده از پارامترهای پرسوجویی که از ورودی کاربر در یک مؤلفه دیگر دریافت کردهام فیلتر کنم.

من قادر هستم دادههایی را که کاربران از طریق ورودی ارسال میکنند دریافت کنم و آن را در console.log چاپ کنم. اما نمیدانم چگونه از آن برای فیلتر کردن جدول استفاده کنم.

من یک فیلتر ساختهام اما به دلایلی نمیتوانم آن را فراخوانی کنم.

این فیلتر من است :

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;
  }
}

این کامپوننت من است ngOnInit، من چند فیلتر دیگر آنجا دارم، به عنوان مثال فیلتر چکباکس:

  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(',');
      });

    });
  }

آنچه میخواهم به دست آورم این است که بتوانم جدول را با استفاده از پارامترهای پرسوجو فیلتر کنم.

پاسخ شماره ۱

ما میتوانیم دادههایی که به عنوان ورودی دریافت کردهاید (در کامپوننت والد) را به تابع فیلتر جدول متریال applyFilter در داخل کامپوننت فرزند انتقال دهیم...

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() { }
}

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();
  }
}

یک استکبلیتز کامل و در حال کار اینجا