Question

我已经设置了一些用户可以点击的过滤器，以便过滤我的Angular应用中的列表显示。我视图中的相关代码如下所示：

<md-checkbox *ngFor="let option of categoryFilters.options" [(ngModel)]="option.value" (click)="filterByCategory($event)">
     {{option.label}}
</md-checkbox>

你会注意到我上面有一个“filterByCategory（）”函数。我想要做的是根据用户从md-checkbox列表中点击的值过滤列表。到目前为止，我还没有抓住这个价值。

我在我的组件中试过这个：

public filterByCategory(option) {
    console.log('Category filter ' + option + ' was clicked');
}

但这只是将鼠标事件打印到控制台：

'点击过滤器[对象MouseEvent]'

我也尝试过使用双向绑定值，如下所示：

public filterByCategory(option) {
    console.log('Category filter ' + this.option.value + ' was clicked');
}

但是返回'undefined'。

顺便说一句，我正在尝试访问此处的值的选项在我的组件中看起来像这样：

private categoryFilters = {
    enabled: true,
    options: [
        { toolbarLabel: 'A', label: 'Option A', value: false },
        { toolbarLabel: 'B', label: 'Option B', value: false },
        { toolbarLabel: 'C ', label: 'Option C ', value: false }
    ],
    text: null
};

可以使用什么来实际获取被点击的值，以便将其传递给过滤器函数？

Answer 1

试试这个。 (click)="optionClicked(option)">

optionClicked(option) {
console.log(option.value)
}

Answer 2

<强>更新

你也可以试试这个：

<md-checkbox *ngFor="let option of categoryFilters.options" 
     [(ngModel)]="option.value" (change)="filterByCategory(option.label, $event)">
   {{option.label}}
</md-checkbox>

filterByCategory(value, checked) {
  if(checked) {
    console.log(value)
  }
}

原始回答：

你可以这样做：我完全删除了双向绑定，因为我们使用$event和value - 属性，所以在这种情况下ngModel是多余的。我还使用change - 事件代替click。因此，请将模板更改为：

<md-checkbox *ngFor="let option of categoryFilters.options" 
    value="{{option.label}}" (change)="filterByCategory($event)">
       {{option.label}}
</md-checkbox>

在组件中，让我们看看在实际查看选项值之前是否选中了复选框。

filterByCategory(event) {
  if(event.checked) {
    console.log(event.source.value)
  }
}

这似乎工作正常：

捕获Click事件以转换为Angular App中的函数

2 个答案:

Demo