Angular中matAutocomplete无法通过patchValue赋值的问题求助

核心问题分析 #

• 重复订阅导致逻辑混乱：每次input事件触发都会创建新的valueChanges订阅，同一输入会多次执行过滤，还会引发内存泄漏。
• 过滤逻辑自毁数据：直接用已过滤后的filteredTargetListOptions再次过滤，会导致原始选项列表丢失，后续无法恢复完整选项。
• 赋值类型不匹配：mat-option的value是ITargetData对象，但你传的是字符串，控件无法识别，displayFn也没法正确显示内容。

修复后的完整代码 #

TypeScript 代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

interface ITargetData {
  name: string;
  // 按需添加其他属性
}

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit, OnDestroy {
  form!: FormGroup;
  // 存储完整的原始选项列表
  originalTargetListOptions: ITargetData[] = [];
  filteredTargetListOptions: ITargetData[] = [];
  private valueChangeSubscription!: Subscription;

  ngOnInit(): void {
    this.form = new FormGroup({
      targetListValue: new FormControl(null, [Validators.required]),
    });

    // 初始化原始选项数据（实际项目中可能从接口获取）
    this.originalTargetListOptions = [
      { name: 'Hello' },
      { name: 'World' },
      { name: 'Angular' }
    ];
    this.filteredTargetListOptions = [...this.originalTargetListOptions];

    // 一次性订阅valueChanges，避免重复订阅
    this.valueChangeSubscription = this.form.controls.targetListValue.valueChanges.subscribe((inputValue) => {
      this.filterOptions(inputValue);
    });

    // 调用赋值方法
    this.setTargetValue();
  }

  // 基于原始列表执行过滤逻辑
  filterOptions(inputValue: string | ITargetData) {
    // 兼容输入字符串或对象的情况
    const filterText = typeof inputValue === 'string' 
      ? inputValue.toLowerCase() 
      : inputValue.name.toLowerCase();
    
    this.filteredTargetListOptions = this.originalTargetListOptions.filter(item => 
      item.name.toLowerCase().includes(filterText)
    );
  }

  displayFn(option?: ITargetData): string | undefined {
    return option ? option.name : undefined;
  }

  // 正确的赋值方法：传入匹配的对象
  setTargetValue() {
    // 从原始列表中找到目标对象
    const targetItem = this.originalTargetListOptions.find(item => item.name === 'Hello');
    if (targetItem) {
      // 两种赋值方式都可用
      this.form.patchValue({ targetListValue: targetItem });
      // this.form.controls.targetListValue.patchValue(targetItem);
    }
  }

  ngOnDestroy(): void {
    // 销毁订阅，防止内存泄漏
    if (this.valueChangeSubscription) {
      this.valueChangeSubscription.unsubscribe();
    }
  }
}

HTML 代码 #

<input [matAutocomplete]="auto" matInput
       formControlName="targetListValue">
<mat-autocomplete
   #auto="matAutocomplete"
   [displayWith]="displayFn">
   <mat-option *ngFor="let targetItem of filteredTargetListOptions"
               [value]="targetItem">
       {{targetItem.name}}
   </mat-option>
</mat-autocomplete>

关键修复说明 #

1. 移除(input)事件绑定：不再通过input触发订阅，改用ngOnInit中一次性订阅valueChanges，避免重复订阅和内存泄漏。
2. 分离原始与过滤列表：用originalTargetListOptions保存完整数据，每次过滤都基于它，保证选项不会丢失。
3. 匹配赋值类型：patchValue时传入ITargetData对象，而非字符串，确保控件和displayFn能正确解析。
4. 清理订阅：组件销毁时取消valueChanges订阅，避免内存泄漏。

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