SELECTのAngular2で選択されたオプションが他のすべてのSELECTタグのオプションから削除されました

Question

複数のドロップダウンがあり、すべて同じ初期オプションがあります。 （先頭に1つの値で初期化されます）。 1つのドロップダウンで1つのオプションを選択する際に、ケースに対する解決策を探しています。他のドロップダウンでオプションとして表示されなくなりました。 私はAngularJSでこのソリューションを見て、それが角2 RC 4で作業することに成功しなかった： https://stackoverflow.com/a/28918935

また、私はパイプがAngular.ioのようフィルタリングのために推奨されていないことを見た：

Angularチームと多くの経験豊富なAngularデベロッパーは、 は、フィルタリングと並べ替えロジックをコンポーネント に移動することを強くお勧めします。

Answer 1

私はこの問題の解決策を得ましたTSに10 ：

selectedList: any = []; 

セレクトの選択された値を変更 - 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; 
    }); 

}

Answer 2

カスタムフィルタパイプを作成できます。 HTMLで

：

options | optionFilter:optionToRemove 

JS：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> 

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