Angular2 SELECT OPTION nach Rohr führt

Question

Ich habe eine Auswahl, die mit einer Rohrleitung gefiltert wird. Die Auswahl sieht wie folgt aus:

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

und der Filter wie folgt aussieht:

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

}

Es funktioniert gut. Beim ersten Lauf wird der erste Schwimmer in der Auswahl ausgewählt. Bei nachfolgenden Läufen werden die Optionen gefiltert, aber es ist keine Option ausgewählt. Wie kann ich erzwingen, dass die erste Option ausgewählt wird, nachdem die Pipe ausgeführt wurde?

Answer 1

Es wird nicht empfohlen, die Filterung in einer Rohrleitung durchzuführen. Bitte werfen Sie einen Blick auf Pipes in Angular 2 docs

Der wichtigste Teil ist:

Das Angular-Team und viele erfahrene Angular Entwickler dringend empfohlen, Filter- und Sortierlogik in der Komponente selbst zu bewegen.

Das Verschieben der Logik auf die Komponente selbst sollte also auch Ihr Problem lösen.