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

Question

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

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

The Angular team and many experienced Angular developers strongly recommend that you move filtering and sorting logic into the component itself.

Answer 1

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

在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 的 selected 值时 - 将项目推入 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 标签选项中删除

Angular2 selected option in SELECT removed from all other SELECT tags options

drop-down-menu

angular2-forms

angular