带有多个过滤器的Angular2管道不起作用答案

【问题标题】：Angular2 pipe with multiple filters not working带有多个过滤器的Angular2管道不起作用
【发布时间】：2018-03-12 23:48:52
【问题描述】：

我在 Angular2 中使用带有多个过滤器的管道时遇到问题。

这是我的html：

<div class="container">
  <div class="row">
    <filters (onSelectedCategoryChange)="changeSelectedCategory($event)" (onSelectedTypeChange)="changeSelectedType($event)"></filters>
  </div>
  <br />
  <div class="row">
    <place *ngFor="let place of (places | placeSearch: selectedCategory : selectedType)" [place]="place"></place>
  </div>
</div>

地点和过滤器是同一个模块中包含的两个组件。

这是管道：

import { Place } from './../../shared/models/place';
import { Pipe, PipeTransform } from '@angular/core';

import * as _ from 'underscore';

@Pipe({
    name: 'placeSearch'
})
export class PlaceSearchPipe implements PipeTransform {

    constructor() { }

    transform(places: Place[], args: string, typeFilter: string): any {
        if (args) {
            places = _.filter(places, function (place) {
                return place.categories.indexOf(args) !== -1;
            });
        }

        if (typeFilter) {
            places = _.filter(places, function (place) {
                return place.type === typeFilter;
            });
        }

        return places;
    }
}

发生的情况是，当页面加载了数组的所有元素时，一切正常，然后我在过滤器上应用一个，它会正确过滤。但是，当我撤消过滤器并应用另一个过滤器（这会影响未包含在第一组过滤器中的其他元素）时，仅保留第一组过滤器中包含的也将在此过滤器中的项目。

【问题讨论】：

标签： angular typescript

【解决方案1】：

我发现了它为什么不起作用。就是因为这个：

<place *ngFor="let place of (places | placeSearch: selectedCategory : selectedType)" [place]="place"></place>

当我把它改成：

<div *ngFor="let place of places | placeSearch: selectedCategory : selectedType">
  <place [place]="place"></place>
</div>

它开始工作了。

【讨论】：