2017-10-01 20 views
0

Angular2で複数のフィルタを持つパイプを使用すると問題が発生します。複数のフィルタが動作していないAngular2パイプ

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

プレイスと同じモジュールに含まれる成分の両方をされてフィルター:

は、これは私のhtmlです。

これはパイプである:

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

何が起こっているされ、配列のすべての要素を持つときに、ページが読み込まれると、すべての[OK]を、私はフィルターに1を適用し、それが正しくフィルタリングします。しかし、フィルタを元に戻して別のフィルタ(フィルタの最初のセットに含まれていない他の要素に影響を与える)を適用すると、このフィルタにも含まれるフィルタの最初のセットに含まれるアイテムだけが残ります。

答えて

0

なぜそれが機能していないのか分かりました。それは、このためだった:

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

それが仕事を始めました。

関連する問題