Angular Material实现表格每行独立mat-auto-complete组件方案咨询

这个坑我之前也踩过！核心原因确实如你所说——所有行共用了同一个模板变量，导致所有<mat-autocomplete>实例被绑定到同一个引用，选值时自然会同步到所有行的输入框。下面给你两种靠谱的解决方案，按推荐程度排序：

方案一：封装独立子组件（最推荐） #

把每行的输入框和自动完成组件抽成一个单独的子组件，这样每个子组件内部的模板变量都是独立的，完全不会有冲突。步骤很简单：

1. 创建子组件，比如AutoCompleteInputComponent：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-auto-complete-input',
  template: `
    <input type="text"
           [formControl]="myControl"
           [matAutocomplete]="auto"
           (input)="onInputChange($event.target.value)"
           (optionSelected)="onOptionSelected($event.option.value)">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  `
})
export class AutoCompleteInputComponent {
  @Input() initialValue: string;
  @Input() options: string[]; // 传入下拉选项列表
  @Output() valueChanged = new EventEmitter<string>();

  myControl = new FormControl();
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.myControl.setValue(this.initialValue);
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }

  onInputChange(value: string) {
    this.valueChanged.emit(value);
  }

  onOptionSelected(value: string) {
    this.valueChanged.emit(value);
  }
}

2. 在你的表格组件模板中，替换原来的列内容为这个子组件：

<ng-container matColumnDef="autoCompleteColumn">
  <th mat-header-cell *matHeaderCellDef> 自动完成列 </th>
  <td mat-cell *matCellDef="let row">
    <app-auto-complete-input
      [initialValue]="row.yourProperty"
      [options]="yourOptionsList"
      (valueChanged)="updateRowValue(row, $event)">
    </app-auto-complete-input>
  </td>
</ng-container>

3. 在表格组件中实现updateRowValue方法，用来更新当前行的数据：

updateRowValue(row: YourRowType, newValue: string) {
  row.yourProperty = newValue;
  // 如果需要同步到数据源或者表单，可以在这里处理
}

这种方式的好处是代码解耦、复用性强，后续维护也方便，完全避免了模板变量冲突的问题。

方案二：利用行索引绑定独立的自动完成实例（不封装组件的情况） #

如果不想封装子组件，也可以通过ViewChildren来管理每个行的MatAutocomplete实例，给每个输入框指定对应的实例：

1. 模板中给每个<mat-autocomplete>添加一个唯一的id，比如用行的index：

<ng-container matColumnDef="autoCompleteColumn">
  <th mat-header-cell *matHeaderCellDef> 自动完成列 </th>
  <td mat-cell *matCellDef="let row; let i = index">
    <input type="text"
           [formControl]="getRowControl(i)"
           [matAutocompleteTrigger]="getAutocomplete(i)">
    <mat-autocomplete #auto="matAutocomplete" [id]="'auto-' + i">
      <mat-option *ngFor="let option of filteredOptions(i) | async" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </td>
</ng-container>

2. 在组件类中，维护一个FormControl数组，并用ViewChildren获取所有MatAutocomplete实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  // ... 组件元数据
})
export class YourTableComponent {
  dataSource = [...]; // 你的表格数据源
  options = ['Option 1', 'Option 2', 'Option 3']; // 下拉选项
  formControls: FormControl[] = [];

  @ViewChildren(MatAutocomplete) autoCompletes: QueryList<MatAutocomplete>;

  ngOnInit() {
    // 为每一行初始化FormControl
    this.formControls = this.dataSource.map(row => new FormControl(row.yourProperty));
  }

  getRowControl(index: number): FormControl {
    return this.formControls[index];
  }

  getAutocomplete(index: number): MatAutocomplete {
    return this.autoCompletes.toArray()[index];
  }

  filteredOptions(index: number): Observable<string[]> {
    return this.formControls[index].valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

这种方式不需要封装组件，但需要手动管理每个行的FormControl和Autocomplete实例，代码相对繁琐一些，适合简单场景。

最后再强调一下：模板变量在整个模板作用域内是唯一的，所以不能在循环（比如mat-table的行）里重复使用同一个模板变量名，这就是导致所有行同步变化的根本原因。上面两种方法都是通过让每个行的自动完成组件拥有独立的实例来解决这个问题。

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