Question

我有几个下拉菜单，都有相同的初始选项。 （可以在开始时使用一个值初始化它们。） 我正在寻找一个案例的解决方案，在一个下拉列表中选择一个选项 - 它将不再显示为其他下拉列表中的选项。我在AngularJS中看到了这个解决方案并且没有成功使其在Angular 2 RC 4中工作： https://stackoverflow.com/a/28918935

此外，我发现从Angular.io开始，不推荐使用管道进行过滤：

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

Answer 1

您可以编写自定义过滤器管道。

in html：

options | optionFilter:optionToRemove

JS：

@Pipe({
    name: 'optionFilter'
})
class OptionFilterPipe implements PipeTransform {
    public transform(options, optionToRemove) {
        return options.filter(function(option) {return option.id !== optionToRemove.id)};
    }
}

Answer 2

我为这个问题找到了解决方案：

在html中：

<select [ngModel]='currValue'
        (change)="update($event.target.value, i, $event.target.options.selectedIndex)"
         name="{{i}}"
         #select>
                <option *ngFor="let currItem of items | distinctValue: selectedList: select.value: i: currValue; let j=index"
                        value="{{currItem}}">{{currItem}}</option>
</select>

在ts：

selectedList: any = [];

更改select的选定值时 - 将项目推入selectedList并从selectedList中删除此元素的上一个选定值，以便可以再次选择它。

在DistinctValue.pipe.ts：

transform(itemsList: any, filtersList: any, excludeItem: any, row: any, currItem: any) {

  return itemsList.filter(function(option:any) {
      let keepItem: boolean = true;
      let currFilter: number = 0;

      // Check if the option should be filtered
      while ((keepItem) && (currFilter < filtersList.length)) {

        // If option exists in filters list and not this item
        if ( (option.fieldname != currItem.fieldname)
              (option.fieldname != excludeItem.fieldname) &&
              (option.fieldname == filtersList[currFilter].fieldname) ) {
            keepItem = false;
        }

        currFilter++;
      }

      return keepItem;
    });

}

SELECT中的Angular2选择选项已从所有其他SELECT标记选项中删除

2 个答案: