角材料2多列搜索过滤器

时间:2018-07-12 23:11:35

标签: angular search filtering angular-material2

我正在尝试过滤角材料2数据源表,以映射它对应于数据表中的正确搜索输入模型。例如,我有要传递的过滤器对象以匹配表的列。

用户输入的FilterObject:

{ description: "", manufacturer: "", unit: "" }

返回代码的功能

this.ItemService.GetItems(false).subscribe((res) => {
        // storing the data to display in the table, data is displayed in the view
        this.dataSource = new MatTableDataSource<Item>(res);

        // pushing form data to this observable to keep track of
        const ItemsFilter$ = [];

        for(let key in this.ItemModel) {
            ItemsFilter$.push(this.MultipleSearchFilterFormGroup.get(key).valueChanges.debounceTime(150).distinctUntilChanged().startWith(''));
        }
        // combine ItemsFilter$ data array and merge it to the data array model then in subscribe the FilterObject you see as { description: "", manufacturer: "", unit: "" }. With the values you typed in.
        Observable.combineLatest(ItemsFilter$)
                  .map((res) => this.mapToDataModel(res, this.ItemModel))
                  .subscribe(FilterModel => {
                        // I have use to filter the property but this only allows me to filter one only and not multiple while typing into the input fields. 
                       this.dataSource.filterPredicate = (data: any, filter: any) => (data.description.indexOf(filter.description.toString()) !== -1); 
                       this.dataSoruce.filter = filter;


        });


        setTimeout(() => {
            this.dataSource.paginator   = this.paginator;
            this.dataSource.sort        = this.sort;                
        });
    });

Image of view click here

0 个答案:

没有答案