Question

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

以下是此示例应用的源代码：https://github.com/EgomortIncognitus/bookstore。

Answer 1

我在这里有一个完整的例子：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变量。

Answer 2

您也可以使用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()));
      }
    }

Answer 3

了解Angular Pipes。为了创建一个＆＃34; filterBy＆＃34;管道，您需要实现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中使用，只能获得红色＆＃39;对象：

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

如何按类别过滤产品卡？

3 个答案: