如何按类别过滤产品卡片？答案

【问题标题】：How to filter product cards by category?如何按类别过滤产品卡片？
【发布时间】：2017-07-10 16:55:20
【问题描述】：

我很好奇如何按类别过滤页面上的内容，这样当我点击“哲学”类别时，页面上将仅保留来自该特定类别的书籍，而其他将被隐藏。我在这个项目中使用 Angular、Typescript 和 Angular-CLI。请解释一下，因为我想深入了解这一点。

这里是这个示例应用的源代码：https://github.com/EgomortIncognitus/bookstore。

【问题讨论】：

过滤管道？您可以在文档中了解它们

标签： angular typescript angular-cli

【解决方案1】：

看看 Angular Pipes。为了创建“filterBy”管道，您需要实现PipeTransform interface，您可以猜到，它会动态转换任何数组。

假设您有一个如下所示的数组：

const foo = [{
    title: 'bar',
    id: 2,
    color: 'red'
}
…]

并且您想通过其中一个对象字段对其进行过滤...您最终应该得到如下所示的内容：

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filterBy'
})

@Injectable()
export class FilterByPipe implements PipeTransform {
    transform( array: Array<any>, filterField: string, filterValue: string ): Array<any> {
        if (!array) return [];
        return array.filter(item => item[filterField] == filterValue);
    }
}

在 HTML 中使用，仅获取“红色”对象：

<tr *ngFor="let item of array | filterBy: 'color' : 'red'">

【讨论】：

知道了，在某种程度上......但是这个用于 html 的 sn-p 我应该包含在每个类别的每个按钮中，对吗？
不确定我的问题是否正确。您可以在任何 *ngFor 结构中使用 filterBy 管道，并且可以使用变量和模型来添加更多过滤器类别。例如：
这是我尝试过但不起作用的方法，尽管我知道我在某处无知地犯了错误。请指导我一点。 '从'@angular/core'导入{可注射、管道、管道转换}； @Pipe({ name: 'filterCategory' }) @Injectable() 导出类 FilterCategoryPipe 实现 PipeTransform { transform(books: Array, filterField: string, filterValue: string): Array { if (!books) return []; return books.filter(category => category[filterField] === filterValue); } }'
FYI ...您不应该使用管道进行过滤，除非您确定您的列表会很小并且您不担心性能。在此处查看信息：angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

【解决方案2】：

我在这里有一个完整的例子：https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM-CLI-Final

这是组件：

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

import { IProduct } from './product';

@Component({
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

}

然后你只需绑定到filteredProducts 变量。

【讨论】：

【解决方案3】：

你可以使用 Pipes 来做同样的事情。例如

在这种情况下，我们输入要过滤的值，但您可以将其绑定到将值传递给管道的按钮

html模板

<label class="control">Filter items
    <input class="edit-Label" type=”text” [(ngModel)]='filter' placeholder="Filter"
               onfocus="this.placeholder = ''" onblur="this.placeholder = 'Filter'"/>
</label>

*ngFor="let i of comments | myFilter: filter // is comming from the input here you can make use of button to pass value to filter

管道组件

@Pipe({
      name: 'myFilter'
    })

    export class FilterPipe implements PipeTransform{

      transform(value: any[], q: string) {
        if (!q || q === '') {
          return value;
        }
        return value.filter(item => -1 < item.comment.toLowerCase().indexOf(q.toLowerCase()));
      }
    }

【讨论】：