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';
}

这将设置类别以及来自JUST生成的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

而不是＆＃34; 创建＆＃34;那些components（以及methods）手动，我创建了array objects并使用 ngFor 绑定它，所以&& ＃39;更容易得到哪个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

使用Switch语句过滤搜索类别

1 个答案: