Question

我有2个选择字段，即类别和类别类型。我需要根据这些内容过滤表格。我也写过管道过滤器功能。

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

我没有收到任何错误，但如果我从列表中选择项目，表格将变空。

Answer 1

确保您的Category对象在运行时具有所有属性

或

 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

根据您的输入，我尝试了这段代码并为我工作

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>

html没有变化，它与你的相同。

以角度2过滤管道

2 个答案: