管角2过滤器组件通过枚举

Question

IHAVE一个问题，我想她的类别进行过滤我的组件的列表，但我管不工作，你能不能帮我

，这是我的烟斗：

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> 
 
     
 

我的组件列表中有一类，我想以显示为例只是分量谁categoryis“表单控件”

感谢

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 
 
}