Angular动态加载mat-select时如何精准绑定目标元素？

你遇到的问题根源在于：Angular的*ngFor默认以值（对于字符串这类原始类型）作为列表项的跟踪依据，当数组中存在多个相同值的元素时，Angular无法准确区分每个mat-select实例，导致变更检测时出现绑定同步异常。同时直接使用字符串数组绑定ngModel，也会因原始类型的特性引发意外的视图联动。

1. 改用对象数组存储选择项 #

将字符串数组替换为对象数组，每个对象包含独立的value属性，确保每个列表项拥有唯一引用，避免*ngFor混淆项：

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

export class DynamicMatSelectComponent {
    // 用对象数组存储每个下拉框的选中值
    matSelects: { value: string }[] = [{ value: "" }];
    @Output() selectionsChange = new EventEmitter<string[]>();

    // 添加新下拉框的方法
    addMatSelect() {
        this.matSelects.push({ value: "" });
        this.emitCurrentSelections();
    }

    // 下拉框选择变化时的处理
    onSelectionChange(index: number, event: any) {
        this.matSelects[index].value = event.value;
        this.emitCurrentSelections();
    }

    // 向父组件传递所有选中值
    private emitCurrentSelections() {
        const values = this.matSelects.map(item => item.value);
        this.selectionsChange.emit(values);
    }
}

2. 更新模板并添加trackBy函数 #

修改模板的绑定路径，同时给*ngFor添加trackBy，让Angular能精准识别每个列表项：

<div *ngFor="let item of matSelects; let i = index; trackBy: trackByIndex">
    <mat-select [(ngModel)]="item.value" (selectionChange)="onSelectionChange(i, $event)">
        <!-- 替换为你的实际下拉选项 -->
        <mat-option value="option1">选项1</mat-option>
        <mat-option value="option2">选项2</mat-option>
        <mat-option value="option3">选项3</mat-option>
    </mat-select>
</div>
<button (click)="addMatSelect()">添加下拉框</button>

在组件类中补充trackByIndex函数：

trackByIndex(index: number): number {
    return index;
}

3. 父组件接收数据 #

父组件通过监听输出事件获取所有选中值：

<app-dynamic-mat-select (selectionsChange)="handleSelections($event)"></app-dynamic-mat-select>

handleSelections(selectedValues: string[]) {
    // 处理子组件传递的选中数据
    console.log("所有下拉框选中值：", selectedValues);
}

• 对象数组绑定：每个mat-select绑定的是独立对象的value属性，彼此间不会因值相同产生绑定干扰；
• trackBy函数：告诉Angular以索引作为列表项的跟踪标识，确保每个mat-select实例完全独立，不会被错误复用，彻底解决同步更新问题。

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