検索ステートメントをフィルタリングするためのSwitchステートメントの使用

Question

Angular 2アプリケーションの検索機能では、ユーザーがカテゴリ別にフィルタリングするためにクリックできるフィルタセット（material2のmd-スライドトグルボタンを使用）があります。それは次のようになります。

public group1Select() { 
    this.category = 'group1'; 
} 

：ユーザーは、例えば、最初のオプションをクリックした場合、それはこの機能を起動したいよう

<div><md-slide-toggle value="group1" name="category" [(ngModel)]="group1" (click)="group1Select()"> Group 1</md-slide-toggle></div> 
<div><md-slide-toggle value="group2" name="category" [(ngModel)]="group2" (click)="group2Select()"> Group 2</md-slide-toggle></div> 
<div><md-slide-toggle value="group3" name="category" [(ngModel)]="grpup3" (click)="group3Select()"> Group 3</md-slide-toggle></div> 
<div><md-slide-toggle value="group4" name="category" [(ngModel)]="group4" (click)="group4Select()"> Group 4</md-slide-toggle></div> 
<div><button md-raised-button name="category" (click)="refresh()">RESET</button></div> 

その後、私のコンポーネントで、私はカテゴリを設定しています

これは、カテゴリと、そのカテゴリが生成されたことから来る10件の結果の新しいリストを設定します。これは完全に機能しています。

私たちのAPIは、区切りリストを使用するように設定されているので、単一の値またはコンマで区切られた一連の値を受け取ることができます。私のリセットボタンでは、例えば、10個の結果の新しいリストをトリガする "search.refesh"関数があります。以下に示すように、 "カテゴリ"にすべてのカテゴリを含めるように設定しています。 ）単にそれらすべてを一覧表示することにより：私がいることを、ユーザーは、たとえば、「GROUP1」と「グループ2」の両方のボタンを選択した場合になるように、今、いくつかの条件付きロジックを設定されているかしたいのですがどのような

public refresh(): void { 
    this.search.refresh(); 
    this.category = 'group1,group2,group3,group4'; 

結果にはその2つのカテゴリの結果だけが含まれます。言い換えれば、ユーザーが最初にグループ1のボタンを選択し、そのボタンを選択解除しないでボタン2をクリックしたので、ロジックは "this.category = 'group1、group2'"となります。その2つのカテゴリの結果のみを含める必要があります。

ここで私の質問です：どのようにボタン選択のさまざまなシナリオを処理するロジックを設定できますか？ switch文を使用しますか？または単に/ else文ですか？それとも別のアプローチが良いですか？手動でこれらのcomponents（ともmethods）「を作成」

Answer 1

の代わりに、groupsがチェックされている取得する方が簡単だろうので、私は、objectsのarrayを作成し、ngForを使用してそれをバインドしたいです。

コンポーネント：

this.categories = [ 
    { name: 'Group 1', value: 'group1', checked: false }, 
    { name: 'Group 2', value: 'group2', checked: false }, 
    { name: 'Group 3', value: 'group3', checked: false }, 
    { name: 'Group 4', value: 'group4', checked: false } 
]; 

onChecked(): void { 
    const checkedGroups: string = this.categories.filter(x => !!x.checked) 
               .map(x => x.value) 
               .join(',')); 
    // do what you want with the checked groups 
    console.log(checkedGroups); 
} 
... 

HTML：

<div *ngFor="let category of categories"> 
    <md-slide-toggle [name]="category.name" (change)="onChecked()" [(ngModel)]="category.checked">{{category.name}}</md-slide-toggle> 
</div> 
<div><button md-raised-button name="category" (click)="refresh()">RESET</button></div> 

PS：私は(change)を使用してい注意、ない(click)$イベント。

Plunker：DEMO