Javascript 使用Switch语句筛选搜索类别

在Angular 2应用程序的搜索功能中，我有一组过滤器（使用material2的md滑动切换按钮），用户可以单击这些过滤器按类别进行过滤。看起来是这样的：

<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设置为使用分隔列表，因此它可以接收单个值，也可以接收由逗号分隔的一系列值。例如，通过我的重置按钮，我有一个“search.refesh”函数，可以触发一个包含10个结果的新列表，正如您在下面看到的，我将“category”设置为包含所有类别，只需列出所有类别）：

我现在想做的是设置一些条件逻辑，这样，如果用户同时选择“group1”和“group2”的按钮，结果将只包括这两个类别的结果。换句话说，逻辑将是“this.category='group1，group2'”，因为用户首先为组1选择了按钮，然后在没有取消选择该按钮的情况下，也单击了按钮2。因此，生成的10个结果应该只包括这两个类别的结果

我的问题是：如何设置逻辑来处理按钮选择的各种场景？我会使用switch语句吗？或者只是if/else语句？或者另一种方法更好吗？

与手动“创建”那些

组件（以及
方法）不同，我将创建
对象的
数组
，并使用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);
}
...

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

HTML:

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

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


{{category.name}
重置

PS:请注意，我使用的是
（更改）
，而不是
（单击）
$event

Plunker：
这看起来是一种非常有效且优雅的方法。我要试一试。谢谢