Question

我在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;
    }
}

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

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

它开始工作了。

多个过滤器无效的Angular2管道

1 个答案: