在 mat-checkbox 检查 Angular 上隐藏/显示表单字段答案

【问题标题】：Hide/Show form field(s) on mat-checkbox check Angular在 mat-checkbox 检查 Angular 上隐藏/显示表单字段
【发布时间】：2021-03-05 20:14:10
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular angular-material angular-reactive-forms angular-ng-if angular-arrays

【解决方案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>

【讨论】：