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

}

工作正常。在第一次运行时，选择选择中的第一个游泳者。在后续运行中，选项已过滤，但未选择任何选项。如何在管道执行后强制选择第一个选项？

Answer 1

不建议在管道中进行过滤。请查看Pipes in Angular 2 docs

最重要的部分是：

Angular团队和许多经验丰富的Angular开发人员强烈建议您将过滤和排序逻辑移动到组件本身。

因此，将逻辑移动到组件本身也应该可以解决您的问题。

管道执行后的Angular2 SELECT OPTION

1 个答案: