Angular: Как отфильтровать таблицу данных, используя параметры запроса - PullRequest
Новая
       12

Angular: Как отфильтровать таблицу данных, используя параметры запроса

2 голосов
/ 02 июля 2019

Я хочу отфильтровать свою таблицу, используя параметры запроса, полученные из пользовательского ввода в другом компоненте.

Я могу получить данные, которые пользователи отправляют через ввод, и распечатать их на 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(',');
      });

    });
  }

Что я хочу сделать, так это уметь фильтровать таблицу, используя параметры запроса.

1 Ответ

0 голосов
/ 02 июля 2019

Мы можем передать данные, полученные вами в качестве входных данных (в родительском компоненте), в функцию фильтрации таблицы материалов 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();
  }
}

завершено здесь работает стекаблитц

...