管道角度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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用angular2

的管道的基本示例

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

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
}

＆＃13;

＆＃13;

＆＃13;