Hide/Show mat-checkbox 复选框上的表单字段 Angular

Question

我正在尝试显示和隐藏搜索过滤器输入字段，它基本上是我的表单字段，选中了我的搜索过滤器按钮中的复选框。

我在这里使用 *ngIf 来显示和隐藏字段。它似乎不起作用，问题是，它总是 returns 下拉过滤器中最后选中的复选框的布尔值。我不确定我做错了什么。我有两个阵列，其中一个具有所有可用的过滤器选项，另一个是我在检查时推送过滤器的地方。我只想显示那些选中的输入字段。

  hideFilter(param: any) {
    this.showTheseFilter.forEach((item: any, index) => {
      if (param == item) {
        this.hide = true;
      } else {
        this.hide = false;
      }
    });
    return this.hide;
  }

我的 stackblitz URL：https://stackblitz.com/edit/angular-zub6zk-axvvdk?file=src/app/table-basic-example.ts

Answer 1

我在这里修好了 https://angular-zub6zk-rqler6.stackblitz.io

https://stackblitz.com/edit/angular-zub6zk-rqler6?file=src/main.ts

问题出在 hideFilter 函数上。

我建议你使用一个管道作为你可以在需要时重用的函数。有时喜欢

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'arrIncludesItem'
})
export class ArrIncludesItemPipe implements PipeTransform {
   transform(array: any[], item: any) : boolean{
      if(!item || !array || !array.length) return false
      return array.includes(item);
   }
}

那你就可以把它当作

<element *ngIf="showTheseFilter: arrIncludesItem: 'filterByDateRange'"></element>

Hide/Show mat-checkbox 复选框上的表单字段 Angular

Hide/Show form field(s) on mat-checkbox check Angular

angular

angular-material

angular-reactive-forms

angular-ng-if

angular-arrays