Angular2パイプの実行後のSELECTオプション

Question

パイプを使用してフィルタリングされた選択があります。このような選択になります。

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

import { Swimmer } from './swimmer';

@Pipe({ 
    name: 'swimmerFilter' 
}) 
export class SwimmerFilterPipe implements PipeTransform { 

transform(value: Swimmer[], clubid: string, sex: string): Swimmer[] { 
    clubid = clubid ? clubid.toLocaleLowerCase() : null; 

    console.log('Filter ClubId parameter: ' + clubid); 
    console.log('Filter Sex parameter: ' + sex); 

    return clubid ? value.filter((swimmer: Swimmer) => 
     swimmer.clubid.toString() == clubid && swimmer.sex == sex) : value; 
} 

}

それは正常に動作します：

<select ngControl="swimmerz" #swimmer="ngForm"> 
     <option *ngFor="let swimmer of swimmers | swimmerFilter:selectedClub.id:selectedSex" value= {{swimmer.id}}>{{swimmer.name}}</option> 
    </select> 

とフィルタはこのようになります。最初の選手では、選手の最初の選手が選出されます。後続の実行では、オプションはフィルタリングされますが、選択されたオプションはありません。パイプの実行後に最初のオプションを強制的に選択するにはどうすればよいですか？

Answer 1

パイプでのフィルタリングはお勧めしません。最も重要な部分は、Pipes in Angular 2 docs

を見てされてください：

角度チームと多くの経験豊かな角度の開発者が強く、コンポーネント自体にフィルタリングやソートロジックを移動することをお勧めします。

ロジックをコンポーネント自体に移動すると、問題が解決するはずです。