管道角度 2 过滤器组件按枚举分类

Question

我有一个问题，我想按她的类别过滤我的组件列表，但我的管道不起作用，你能帮我吗

这是我的烟斗：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'matchCategory'
})
export class MatchesCategoryPipe implements PipeTransform {
  transform(items: Array<any>, category: string): Array<any> {
    return items.filter(item => item.category === category);
  }
}
<!-- list of category!-->
export enum ComponentCategory {
  FormControls = <any> 'Form Controls',
  Containers = <any> 'Containers' ,
  Boxes = <any> 'Boxes',
  DataPresentation = <any> 'Data Presentation',
  Layout = <any> 'Layout',
  Miscellaneous = <any> 'Miscellaneous',
  All = <any> 'All'
}

 <tr *ngFor="let c of componentDescriptorsList | matchCategory: c.category" [ngValue]="'Form Controls'">
      <!--<tr *ngFor="let c of componentDescriptorsList">-->
        <td><a href="#/components/{{c.selector}}">{{c.title}}</a></td>
        <td>&#60;{{c.selector}}&#62;</td>
        <td>{{c.description}}</td>
        <td>{{c.category}}</td>
        
  

我的组件列表有一个类别，我想显示示例组件谁类别是"表单控件"

谢谢

Answer 1

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'matchesCategory'
})
export class MathcesCategoryPipe implements PipeTransform {
    transform(items: Array<any>, category: string): Array<any> {
        return items.filter(item => item.category === category);
    }
}

<li *ngFor="let model; of models | matchesCategory:model.category" (click)="gotoDetail(model)">
<select (change)="selectedCategory = $event.target.value">
   <option *ngFor="let model of models ">{{model.category}}</option>
</select>

使用 Angular2 的管道的基本示例

Answer 2

pipe category
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'matchCategory'
})
export class MatchesCategoryPipe implements PipeTransform {
  transform(items: Array<any>, category: string): Array<any> {
    return items.filter(item => item.category === category);
  }
}

html file to display component & category
<tr *ngFor="let c of componentDescriptorsList | matchCategory: c.category" >
      <!--<tr *ngFor="let c of componentDescriptorsList">-->
        <td><a href="#/components/{{c.selector}}">{{c.title}}</a></td>
        <td>&#60;{{c.selector}}&#62;</td>
        <td>{{c.description}}</td>
        <td>{{c.category}}</td>
      </tr>

typeScript file
import { TypeDecorator } from '@angular/core'
import {
  makeDecorator,
  makePropDecorator
} from './decorators'
export enum ComponentCategory {
  FormControls = <any> 'Form Controls',
  Containers = <any> 'Containers' ,
  Boxes = <any> 'Boxes',
  DataPresentation = <any> 'Data Presentation',
  Layout = <any> 'Layout',
  Miscellaneous = <any> 'Miscellaneous',
  All = <any> 'All'
}
export interface ComponentDescriptorDecorator {
  (obj: ComponentDescriptor): TypeDecorator
  new (obj: ComponentDescriptor): ComponentDescriptor
}
export interface Descriptor {
  title: string
  description: string
}
export interface ComponentDescriptor extends Descriptor {
  category: ComponentCategory
  creationDate: Date
  updatedDate?: Date
  relatedComponents?: any[]
  tags?: string[]
  deprecated?: boolean
}