Angular2選擇管道執行後

Question

我有一個使用管道過濾的選擇。選擇看起來是這樣的：

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

和過濾器看起來像這樣：

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中的第一個游泳運動員被選中。在後續運行中，選項被過濾，但沒有選擇任何選項。如何在管道執行後強制選擇第一個選項？

Answer 1

不建議在管道中進行過濾。請看看Pipes in Angular 2 docs

最重要的部分是：

的角團隊和衆多經驗豐富的開發人員角度強烈建議您將過濾和排序邏輯到組件本身。

因此，將邏輯移至組件本身也應解決您的問題。