Angular父组件传布尔值给子组件实现表格结果过滤

1. 组件间数据传递处理 #

由于navbar和table-view是同级组件，需要通过它们的共同父组件（home组件）完成数据中转：

步骤1：给NavbarComponent添加输出事件 #

修改NavbarComponent，通过@Output把状态变化传递给父组件：

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

export class NavbarComponent {
  showCompleted: boolean = true;
  @Output() showCompletedChange = new EventEmitter<boolean>();

  constructor() {}

  onClick() {
    this.showCompleted = !this.showCompleted;
    this.showCompletedChange.emit(this.showCompleted);
  }
}

步骤2：父组件中转状态 #

修改home组件的模板，接收navbar的状态变化并传递给table-view：

<div class="home">
  <side-panel></side-panel>
  <div>
    <navbar (showCompletedChange)="updateShowCompleted($event)"></navbar>
    <table-view [showCompleted]="currentShowCompleted"></table-view>
  </div>
</div>

添加home组件的逻辑代码：

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

@Component({
  selector: 'home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  currentShowCompleted: boolean = true;

  updateShowCompleted(value: boolean) {
    this.currentShowCompleted = value;
  }
}

2. ViewComponent实现结果过滤 #

修改ViewComponent，区分原始全量数据和展示用的过滤后数据，通过@Input的setter监听状态变化自动过滤：

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class ViewComponent implements OnInit, OnDestroy {
  private subscribe$: Subject<void> = new Subject<void>();
  columns: string[] = ['name', 'description', 'isCompleted'];
  // 存储所有原始数据
  private allResults: DisplayableResult[] = [];
  // 用于表格展示的过滤后数据
  results: DisplayableResult[] = [];

  @Input() set showCompleted(value: boolean) {
    this._showCompleted = value;
    this.filterTableResults();
  }
  private _showCompleted: boolean = true;

  constructor(private service: Service) {}

  ngOnInit() {
    this.service
      .getResultGet(1)
      .pipe(takeUntil(this.subscribe$))
      .subscribe({
        next: (res: Result) => {
          const displayableResult: DisplayableResult = {
            name: res.name,
            description: res.description,
            isCompleted: res.isCompleted,
          } as DisplayableResult;

          this.allResults.push(displayableResult);
          this.filterTableResults();
        },
        error: (error: any) => {
          console.error(error);
        },
      });
  }

  filterTableResults() {
    if (this._showCompleted) {
      // 显示所有结果
      this.results = [...this.allResults];
    } else {
      // 只显示未完成的结果
      this.results = this.allResults.filter(item => !item.isCompleted);
    }
  }

  ngOnDestroy() {
    this.subscribe$.next();
    this.subscribe$.complete();
  }
}

功能验证 #

• 默认状态下showCompleted=true，表格展示所有数据
• 点击navbar的按钮，状态切换为false，表格自动过滤掉已完成的条目
• 再次点击按钮，恢复展示所有数据

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