Angular 7从Store取数据后输入框过滤功能实现遇阻求助

我懂你现在卡在哪了——直接对从Store订阅来的items$用RxJS的filter操作符根本行不通！因为这个filter是用来过滤Observable发出的整个值（这里就是整个账户数组），而不是数组里的单个元素。而且你的过滤值是动态变化的，得把它也变成Observable流，再和原数据流组合起来处理才行。

下面给你一套可行的具体方案：

步骤1：用FormControl管理输入过滤值 #

Angular的FormControl自带valueChanges Observable，能自动监听输入框的变化，比手动写Subject省心多了。先在组件里定义它：

import { FormControl } from '@angular/forms';

// 组件类内部
filterControl = new FormControl('');

步骤2：组合数据流并过滤数组 #

把Store来的items$和filterControl.valueChanges用combineLatest组合（任意一个流有新值时，就会触发新的计算），然后在map操作符里对数组做真正的元素过滤：

import { combineLatest } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

// 组件类内部
@Select(AccountsState.getAccounts) items$: Observable<any[]>;
filteredItems$: Observable<any[]>;

ngOnInit() {
  // 给valueChanges加startWith，确保页面初始化时也能触发一次过滤
  this.filteredItems$ = combineLatest([
    this.items$,
    this.filterControl.valueChanges.pipe(startWith(''))
  ]).pipe(
    map(([items, filterValue]) => {
      // 这里替换成你实际的过滤逻辑，比如匹配账户的某个字段
      return items.filter(item => 
        item.name.toLowerCase().includes(filterValue.trim().toLowerCase())
      );
    })
  );
}

步骤3：在HTML中渲染过滤后的数据流 #

把原来的ngFor改成绑定过滤后的filteredItems$：

<!-- 过滤输入框 -->
<input type="text" [formControl]="filterControl" placeholder="搜索账户...">

<!-- 渲染过滤后的列表 -->
<div *ngFor="let item of filteredItems$ | async">
  {{ item.name }} <!-- 替换成你的实际展示字段 -->
</div>

为啥之前的方法没用？ #

你之前写的this.items$.pipe(filter(item => item.m === filterValue))有两个核心问题：

1. RxJS的filter操作符是判断整个数组是否符合条件，不是遍历数组元素做过滤；
2. filterValue是普通变量，它变化时，已经创建好的Observable不会重新计算，必须让过滤值也成为Observable流，才能实现联动更新。

记得要确保你的模块里导入了ReactiveFormsModule哦！

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