Angle2中的过滤管

Question

I have 2 select fields,namely Category and Category Type. I need to filter the table based on these contents. I have written pipe filter function as well.

HTML:

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 no-padding">
      <label style="font-size: 20px;color: #55595c;font-family: 'Roboto', sans-serif">Category</label>
      <ng-select [options]="category" [(ngModel)] = "filter.name" name="name" class='filterDropDown' placeholder="All" [allowClear]="true" notFoundMsg="No Category Found">
      </ng-select>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 no-padding" style="left:10%">
      <label style="font-size: 20px;color: #55595c;font-family: 'Roboto', sans-serif">Category Type</label>
      <ng-select [options]="catType" [(ngModel)] = "filter.cat_type" class='filterDropDown' placeholder="All" [allowClear]="true" notFoundMsg="No Category Found">
      </ng-select>
    </div>

component.ts:

public filter: Categories = new Categories();
export class Categories {
  public _id:any;
  public name:string;
  public cat_type:string;
}

Pipe.ts:

export class Categories {
  public _id:any;
  public name:string;
  public cat_type:string;
}

@Pipe({
  name: 'categoryfilter',
  pure: false
})


      export class CategoryPipe implements PipeTransform {
  transform(items: Categories[], filter: Categories): Categories[] {
    if (!items || !filter) {
      return items;
    }
    return items.filter((item: Categories) => this.applyFilter(item, filter));
  } 
  applyFilter(user: Categories, filter: Categories): boolean {
for (let field in filter) {
  if (typeof filter[field] == 'number') {
    console.log("working");
     if (user.name !== filter.name || user._id !== filter._id || user.cat_type !== filter.cat_type) { 
      return false;
    }
  }
}
  return true;
  }
}

I don't get any error, but the table is getting empty if i select item from the list.

Answer 1

Be sure your Category object have all properties at run time

or

 applyFilter(user: Categories, filter: Categories): boolean {
         if (user.name +"" !== filter.name +"" || user._id+"" !== filter._id+"" || user.cat_type+"" !== filter.cat_type+"") { 
             return false;
           }
        return true;
      }

Answer 2

Based on your input i tried this code and its working for me

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Categories } from './model';

@Pipe({
  name: 'categoryfilter',
  pure: false
})
export class CategoryPipe implements PipeTransform {
  transform(items: Categories[], filter: Categories): Categories[] {
    if (!filter) {
      return items;
    }
    const filtered = items.filter(item => {
      if (filter._id === item._id && filter.cat_type === item.cat_type && filter.name === item.name) {
        return item;
      }
    }
    );
    return filtered;
  }
}

model.ts

export class Categories {
  public _id: any;
  public name: string;
  public cat_type: string;
}

component.ts

import { Component, OnInit } from '@angular/core';
import { Categories } from './model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  categories: Categories[];
  filter: Categories = { _id: 2, cat_type: 'abc', name: 'xyz2' };

  ngOnInit() {
    this.categories = [];
    this.categories.push({ _id: 1, cat_type: 'abc', name: 'xyz1' });
    this.categories.push({ _id: 2, cat_type: 'abc', name: 'xyz2' });
    this.categories.push({ _id: 3, cat_type: 'abc', name: 'xyz3' });
    this.categories.push({ _id: 2, cat_type: 'abc', name: 'xyz2' });
    this.categories.push({ _id: 2, cat_type: 'abc', name: 'xyz2' });
  }
}

component.html

  <table class="table adminTable">
    <thead>
      <th>Name</th>
      <th>Type</th>
      <th>Image</th>
      <th>Action</th>
    </thead>
    <tbody>
      <tr *ngFor="let category of categories | categoryfilter: filter">
        <td>{{category.name}}</td>
        <td>{{category.cat_type}}</td>
        <td>
          test
            <!-- {{category.image}} -->
          <!-- <img class="cat-img" src="{{category.image}}"> -->
          <br>
          <p class="inputimg">
            <input type="file" name="{{category._id}}" id="{{category._id}}" class="inputfile" 
              style='display: none;' />
            <label for="{{category._id}}" class="img_change">Change</label>
          </p>
          <td>
            <button class="iconBtn first" >
              <i class="fa fa-pencil" aria-hidden="true"></i>
            </button>
            <button class="iconBtn second" >
              <i class="fa fa-trash-o" aria-hidden="true"></i>
            </button>
          </td>
      </tr>
    </tbody>
  </table>

no change in html its will be same as yours.