使用 Switch 语句过滤搜索类别

Question

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

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

然后，在我的组件中，我正在设置类别，例如，如果用户单击第一个选项，它将触发此功能：

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

这将设置类别并生成一个新列表，其中包含来自该类别的 10 个结果。这是完美的工作。

我们将 api 设置为使用分隔列表，因此它可以接收单个值或以逗号分隔的一系列值。因此，例如，使用我的重置按钮，我有一个“search.refesh”函数，该函数会触发一个包含 10 个结果的新列表，如下所示，我将“类别”设置为包括所有类别，通过简单地列出它们）：

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

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

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

Answer 1

我将创建 array 的 objects 并使用 ngFor em>，因此更容易获得选中的groups。

组件：

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) $event。

Plunker：DEMO