Angular 4 - 在按钮点击时应用过滤器答案

【问题标题】：Angular 4 - apply filter on button clickAngular 4 - 在按钮点击时应用过滤器
【发布时间】：2017-10-30 09:50:03
【问题描述】：

我无法在按钮单击事件上对 mat-table 应用过滤器。

component.html 中的按钮：

<button #button mat-raised-button color="primary" (click)="applyFilter();" value="2017-01">January</button>

component.ts applyFilter 方法调用：

 @ViewChild('button') button: ElementRef;

applyFilter(){
Observable.fromEvent(this.button.nativeElement, 'click')
  .distinctUntilChanged()
  .subscribe(() => {
    if (!this.dataSource) { return; }
    this.dataSource.filter = this.button.nativeElement.value;
  })};

输入字段上的过滤器效果很好，但是当我尝试在按钮上添加 @ViewChild 时，我在控制台输出中遇到错误，例如：

ERROR TypeError: 无效的事件目标

我找不到任何关于 .fromEvent rxjs 的文档，所以任何帮助都会很棒。谢谢

编辑：

这部分代码运行良好：

    <mat-form-field floatPlaceholder="never">
  <input matInput #filter placeholder="Search">
</mat-form-field>

      Observable.fromEvent(this.filter.nativeElement, 'keyup')
    .distinctUntilChanged()
    .subscribe(() => {
      if (!this.dataSource) { return; }
      this.dataSource.filter = this.filter.nativeElement.value;
    });

我想用 12 个按钮（月）隐藏/替换输入字段，每个按钮都会在 mat-table 上应用特定的过滤器

【问题讨论】：

您想根据某些事件更改按钮值是这样吗？
当您点击该按钮时，我想在 mat table 上应用过滤器
所以 click 是一个你可以直接使用该函数的函数，为什么要在组件中使用 applyFilter() 函数
是的，我知道，但我不知道如何在 mat-table 过滤器的上下文中应用它。我尝试过使用静态绑定，但它不起作用
在该函数中过滤该表数组，您的表将被过滤

标签： angular observable

【解决方案1】：

你可以试试这样的： HTML：

<button #button mat-raised-button color="primary" (click)="this.customFilter = getMonth('01'); changeFilter($event)">January</button>

<input [(ngModel)]="this.customFilter"  #filter matInput placeholder="Search">

组件.ts：

changeFilter(event){
  this.dataSource.filter = this.customFilter;
};
getMonth(val){
  let date: any = new Date();
  let yyyy = date.getUTCFullYear();
  return yyyy+'-'+val;
}
Observable.fromEvent(this.filter.nativeElement, 'keyup')
  .distinctUntilChanged()
  .subscribe(() => {
    if (!this.dataSource) { return; }
    this.dataSource.filter = this.filter.nativeElement.value;
  });

【讨论】：

【解决方案2】：

如果你的按钮“2017-01”有一个静态值，那么你可以试试这个：

applyFilter(){
    if (!this.dataSource) { return; }
    this.dataSource.filter = "2017-01";
}

或者按钮值可以改变，所以试试：

<button #button mat-raised-button color="primary" #mybutton (click)="applyFilter(mybutton.value);" value="2017-01">January</button>

applyFilter(value:any){
    if (!this.dataSource) { return; }
    this.dataSource.filter = value:any;
}

【讨论】：