复用Angular可复用输入组件时所有实例datalist下拉数据与首个实例一致

你遇到的下拉数据全局统一的问题，完全来自硬编码的datalist固定id值。
HTML规范要求DOM元素的id属性全局唯一，浏览器在处理<input>的list属性关联的<datalist>时，只会根据全局id匹配页面里第一个渲染出来的、和id值一致的datalist元素。你现在每个组件实例的模板里都写死了<datalist id="dl1">，最终页面渲染后会出现多个id同为dl1的元素，浏览器会默认抓取第一个出现的dl1内的选项，给所有绑定了list="dl1"的输入框使用——哪怕每个Angular组件实例内部的listOfVals已经根据传入的参数加载了对应的数据，这些同id的后续datalist根本不会被浏览器识别关联。
这也完美匹配你观察到的现象：

• 第一个渲染的组件是tktNum类型，它的datalist里加载的是b1
• 不管后续组件传的params是什么、加载的listOfVals是什么，所有输入框都只会关联第一个dl1里的b1选项
• 你在console.log里看到params和组件内部数据完全正常，是因为Angular的组件实例是JavaScript层面隔离的，这和DOM层面的id全局唯一性规则没有冲突

最直接的修复方式是给每个组件实例生成全局唯一的datalist id，替换掉硬编码的dl1：

1. 在组件TypeScript代码中新增一个属性，用来存当前实例专属的唯一datalist标识，在组件初始化时生成值
2. 在模板中把输入框的list属性、datalist的id属性全部绑定到这个动态值上，不再硬编码

调整后的代码示例 #

组件TS代码调整

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

@Component({
  selector: 'app-reuable-filter',
  templateUrl: './reuable-filter.component.html',
  styleUrls: ['./reuable-filter.component.css']
})
export class ReuableFilterComponent implements OnInit {
  // 新增专属的datalist唯一id，避免全局冲突
  uniqueDatalistId: string;
  // 优化listOfVals的类型定义，避免类型不明确的问题
  listOfVals: Array<{ valueField: string }> = [];
  chosenValue: string;
  @Input() params: { filterName: string; filterLabel: string };
  @Output('filterChosen') filterClicked = new EventEmitter<string>();
  
  constructor() { }

  ngOnInit(): void {
    // 生成全局唯一的id，可根据需要替换为UUID类的更严谨的生成逻辑
    this.uniqueDatalistId = `filter-dl-${Math.random().toString(36).slice(2, 10)}`;
    this.fetchFilters();
  }

  fetchFilters(): void {
    if (this.params.filterName === "assigned") {
      this.listOfVals.push({ valueField : 'a1'});
    } else {
      this.listOfVals.push({ valueField : 'b1'});
    }
  }

  clearFilter(): void {
    this.chosenValue = '';
    this.fireEvent();
  }

  fireEvent(): void {
    this.filterClicked.emit(this.chosenValue);
  }
}

组件HTML模板调整

<div class="col">
    <input 
        type="text" 
        class="form-control" 
        [list]="uniqueDatalistId" 
        (click)="clearFilter()" 
        (change)="fireEvent()"
        [placeholder]="params.filterLabel" 
        [(ngModel)]="chosenValue"
    >
    <!-- id绑定为当前实例的唯一值，不再硬编码dl1 -->
    <datalist [id]="uniqueDatalistId"> 
        <option *ngFor="let item of listOfVals">{{ item.valueField }}</option>
    </datalist>
</div>

• 不要在可复用组件中硬编码DOM元素id，一旦出现多个组件实例，必然会触发id重复的DOM冲突
• 可以把简单的随机id生成逻辑替换为UUID生成逻辑，避免极端场景下的id碰撞问题
• 原来模板中用_作为*ngFor的循环变量名，容易触发TypeScript的未使用变量告警，建议替换为有明确语义的变量名比如item，同时把listOfVals的类型从宽泛的{}[]调整为明确的结构定义，减少类型报错

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