Angular 13复选框触发时如何过滤对象并设置display属性

核心问题分析 #

当前你用单个displayOpps变量控制所有项的显示，无法实现单个项根据筛选条件单独控制显示状态。需要改为跟踪所有选中的筛选条件，再逐个判断每个opp是否符合条件。

步骤1：维护选中筛选条件集合 #

在父组件（search-component.ts）中定义数组存储所有选中的筛选值，而非仅记录单个事件值：

selectedFilters: string[] = [];

receiveEvent(event: any) {
  const filterValue = event.target.value;
  const isChecked = event.target.checked;

  // 更新选中的筛选条件：选中则添加，取消则移除
  if (isChecked) {
    if (!this.selectedFilters.includes(filterValue)) {
      this.selectedFilters.push(filterValue);
    }
  } else {
    const index = this.selectedFilters.indexOf(filterValue);
    if (index > -1) {
      this.selectedFilters.splice(index, 1);
    }
  }
}

步骤2：给子组件传递筛选条件并添加判断逻辑 #

修改opp-list-component.ts，接收父组件传递的opps和selectedFilters，并添加判断单个opp是否符合条件的方法：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-opp-list',
  templateUrl: './opp-list-component.html'
})
export class OppListComponent {
  @Input() opps: any[] = [];
  @Input() selectedFilters: string[] = [];

  // 判断当前opp是否满足筛选条件
  isOppVisible(opp: any): boolean {
    // 无选中条件时，全部显示
    if (this.selectedFilters.length === 0) {
      return true;
    }

    // 匹配任意一个选中条件则显示
    return this.selectedFilters.some(filter => {
      return filter === opp.CATEGORYID ||
             filter === opp.PROVIDERNAME ||
             opp.TAGS.toLowerCase().includes(filter.toLowerCase());
    });
  }
}

步骤3：修改列表模板的显示控制 #

在opp-list-component.html中，把全局的displayOpps替换为针对单个opp的判断：

<mat-card *ngFor="let opp of opps" 
 class="oppContainer"
 [attr.data-opp-id]=" 'opp_' + opp.PLACEMENTID "
 [attr.data-filters-cat]="opp.CATEGORYID"
 [attr.data-filters-tags]="opp.TAGS"
 [attr.data-filters-provider]="opp.PROVIDERNAME"
 [attr.data-filters-location]="opp.LOCATIONTYPE"
 [attr.data-filters]="opp.TAGS + ',' +opp.CATEGORYID + ',' + opp.PROVIDERNAME + ','+ opp.LOCATIONTYPE + ',' + opp.BADGEASSETID "
 [style.border-left]="'10px solid ' + 'rgb'+ '(' + opp.COLOURCODE +')' "
 [style.display]="isOppVisible(opp) ? 'block' : 'none'"
>
<!-- 卡片内部内容保持不变 -->
</mat-card>

步骤4：完善父子组件的事件与数据传递 #

在filter-list-component.ts中添加事件发射器，将复选框事件传递给父组件：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-filter-list',
  templateUrl: './filter-list-component.html'
})
export class FilterListComponent {
  @Output() filterChange = new EventEmitter<any>();

  onChange(event: any) {
    this.filterChange.emit(event);
  }
}

在父组件模板中，绑定筛选事件并传递选中条件给列表组件：

<!-- 筛选组件 -->
<app-filter-list (filterChange)="receiveEvent($event)"></app-filter-list>

<!-- 列表组件 -->
<app-opp-list [opps]="opps" [selectedFilters]="selectedFilters"></app-opp-list>

额外说明 #

• 如果需要匹配所有选中条件才显示（而非任意一个），只需把isOppVisible方法中的some替换为every即可。
• TAGS的大小写处理是为了避免因大小写不一致导致的匹配失败。

内容的提问来源于stack exchange，提问作者mac