Angular 5：如何基于valueChanges事件进一步过滤数据实现自动完成

嘿，我来帮你搞定这个Angular自动完成的问题！核心需求其实是两个：根据输入框实时输入过滤可选选项，同时排除已经添加到Chips里的项，还要解决你之前遇到的this上下文报错和Observable类型不匹配的问题。

一、问题根源拆解 #

你之前的报错The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'，本质是两个问题：

1. 在map操作符里你直接返回了this.filterGizmos（一个Observable），但map要求返回的是具体的数据数组，不是Observable，类型完全不匹配；
2. 你没有把「已选Chips列表的变化」和「输入框valueChanges」关联起来，导致添加/删除Chips后，可选列表没法实时更新。

二、完整代码修正 #

1. gizmo.ts 核心修改 #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable, combineLatest, startWith, map, BehaviorSubject } from 'rxjs';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

// 假设你的Gizmo类型定义
interface Gizmo {
  value: string;
  // 其他自定义字段...
}

@Component({
  selector: 'app-gizmo',
  templateUrl: './gizmo.html',
  styleUrls: ['./gizmo.css']
})
export class GizmoComponent implements OnInit {
  gizmoControl = new FormControl();
  filterGizmos!: Observable<Gizmo[]>;
  // 用BehaviorSubject跟踪已选Gizmos，方便监听变化
  private selectedGizmosSubject = new BehaviorSubject<Gizmo[]>([]);
  selectedGizmos$ = this.selectedGizmosSubject.asObservable();

  isSelectable = true;
  isRemovable = true;
  addOnBlur = true;

  constructor(private dataService: DataService) {} // 注入你的数据服务

  ngOnInit() {
    // 1. 加载初始数据并初始化已选列表
    this.dataService.getGizmo(this.gizmoId).subscribe(x => {
      this.selectedGizmosSubject.next(x.gizmos);
    });

    // 2. 组合两个数据源：输入框变化 + 已选列表变化
    this.filterGizmos = combineLatest([
      // 输入框初始值为空，确保页面加载时就触发过滤
      this.gizmoControl.valueChanges.pipe(startWith('')),
      this.selectedGizmos$
    ]).pipe(
      // 每次任一数据源变化时，执行过滤逻辑
      map(([inputValue, selectedGizmos]) => {
        return this.filterGizmoData(inputValue, selectedGizmos);
      })
    );
  }

  // 核心过滤函数：同时处理输入匹配和已选排除
  filterGizmoData(inputValue: string, selectedGizmos: Gizmo[]): Gizmo[] {
    // 先获取所有可选的Gizmo数据源（这里根据你的实际情况调整，若dataService返回Observable需修改）
    const allGizmos = this.dataService.findGizmos(new GizmoParameters());

    // 第一步：排除已经被选中的Gizmo，避免重复选择
    const unselectedGizmos = allGizmos.filter(gizmo => 
      !selectedGizmos.some(selected => selected.value === gizmo.value)
    );

    // 第二步：根据输入关键词过滤（忽略大小写，提升用户体验）
    const trimmedValue = inputValue.trim().toLowerCase();
    if (!trimmedValue) {
      return unselectedGizmos; // 输入为空时返回所有未选中项
    }
    return unselectedGizmos.filter(gizmo => 
      gizmo.value.toLowerCase().includes(trimmedValue)
    );
  }

  addGizmo(event: MatChipInputEvent) {
    const value = (event.value || '').trim();
    if (value) {
      // 找到对应的Gizmo对象
      const targetGizmo = this.dataService.findGizmos(new GizmoParameters()).find(g => g.value === value);
      if (targetGizmo) {
        const currentSelected = this.selectedGizmosSubject.value;
        // 更新已选列表（用展开运算符创建新数组，触发BehaviorSubject的变化通知）
        this.selectedGizmosSubject.next([...currentSelected, targetGizmo]);
      }
    }
    event.chipInput!.clear();
    this.gizmoControl.setValue(''); // 清空输入框
  }

  removeGizmo(gizmoToRemove: Gizmo) {
    const currentSelected = this.selectedGizmosSubject.value;
    // 过滤掉要删除的项，更新已选列表
    this.selectedGizmosSubject.next(
      currentSelected.filter(gizmo => gizmo.value !== gizmoToRemove.value)
    );
  }

  selected(event: MatAutocompleteSelectedEvent) {
    const gizmo = event.option.value;
    const currentSelected = this.selectedGizmosSubject.value;
    if (!currentSelected.some(g => g.value === gizmo.value)) {
      this.selectedGizmosSubject.next([...currentSelected, gizmo]);
    }
    this.gizmoControl.setValue(''); // 选中后清空输入框
  }
}

2. gizmo.html 修正（修复变量名错误） #

你原代码里有几个拼写错误（比如gimzo→gizmo，tag→gizmo.value），这里一起修正：

<mat-form-field>
  <input matInput 
         placeholder="Add Gizmo" 
         #addGizmo 
         [formControl]="gizmoControl" 
         [matAutocomplete]="auto" 
         [matChipInputFor]="gizmoChipList" 
         [matChipInputAddOnBlur]="addOnBlur" 
         (matChipInputTokenEnd)="addGizmo($event)" />
</mat-form-field>

<mat-form-field>
  <mat-chip-list #gizmoChipList>
    <mat-chip *ngFor="let gizmo of selectedGizmos$ | async" 
             [selectable]="isSelectable" 
             color="accent" 
             [removable]="isRemovable" 
             (removed)="removeGizmo(gizmo)">
      {{gizmo.value}}
      <mat-icon matChipRemove *ngIf="isRemovable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
  <mat-option *ngFor="let gizmo of filterGizmos | async" [value]="gizmo">
    {{gizmo.value}}
  </mat-option>
</mat-autocomplete>

三、关键原理讲解 #

1. 为什么用combineLatest？ #

我们需要同时监听两个动态变化的数据源：

• gizmoControl.valueChanges：输入框的实时输入内容
• selectedGizmos$：已选Chips列表的变化（通过BehaviorSubject实现）

combineLatest会在任意一个数据源更新时，把两个数据源的最新值组合起来，触发过滤逻辑。这样不管是输入文字，还是添加/删除Chips，可选列表都会实时更新。

2. startWith的作用 #

valueChanges只有在输入框值变化时才会发射数据，但页面初始化时输入框是空的，我们需要一开始就显示所有未选中的Gizmo。startWith('')给valueChanges一个初始值，确保页面加载时过滤逻辑就会执行。

3. BehaviorSubject的核心价值 #

BehaviorSubject可以保存当前的已选Gizmos状态，并且在状态变化时主动通知所有订阅者。当我们添加或删除Chips时，调用next()更新状态，selectedGizmos$就会发射新的数组，触发combineLatest重新执行过滤。

4. 两步过滤逻辑的必要性 #

• 排除已选项：避免用户重复选择已经添加到Chips中的内容，符合交互逻辑；
• 匹配输入关键词：根据用户输入实时缩小可选范围，提升搜索效率，同时忽略大小写的处理让体验更友好。

5. 解决this上下文错误的原因 #

你之前的错误是因为在map里返回了Observable（this.filterGizmos），而map要求返回的是数据流中的具体值（这里是Gizmo数组）。现在我们在map里直接调用filterGizmoData返回数组，类型完全匹配；同时因为用了箭头函数，this的上下文会自动绑定到组件实例，不会出现绑定错误。

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