无法用addEventListener绑定ng-select事件及ViewChildren类选择失败问题

解决方案 #

1. 解决ViewChildren通过类名获取元素失败的问题 #

@ViewChildren不支持直接使用CSS类选择器（如.abc），只能通过模板引用变量、组件/指令类型来查询元素。你可以：

• 保留现有模板引用变量#qwe（重复变量名会让ViewChildren收集所有带该变量的元素）
• 或者给不同控件分配不同变量名（如#inputCtrl、#selectCtrl），逻辑更清晰

2. 解决ng-select事件绑定无效的问题 #

ng-select是Angular组件，不是原生DOM元素，原生addEventListener无法监听它的Angular输出事件。需要获取组件实例，订阅它的change输出：

修正后的TypeScript代码

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  doomsForm = new FormGroup({
    name: new FormControl(''),
    age: new FormControl('')
  });
  ageArr = [/* 填充你的年龄选项数据 */];

  // 通过模板引用变量收集所有元素，同时兼容ElementRef和NgSelectComponent
  @ViewChildren('qwe') commonElements!: QueryList<ElementRef | NgSelectComponent>;

  ngAfterViewInit() {
    this.setupValueChangeListeners();
  }

  setupValueChangeListeners() {
    this.commonElements.forEach((element, index) => {
      // 处理原生input
      if (element instanceof ElementRef && element.nativeElement.tagName === 'INPUT') {
        element.nativeElement.addEventListener('change', () => {
          this.onInputChange(element.nativeElement.value, index);
        });
      }
      // 处理ng-select组件
      else if (element instanceof NgSelectComponent) {
        // 订阅ng-select的change事件
        element.change.subscribe(selectedValue => {
          this.onSelectChange(selectedValue, index);
        });
      }
    });
  }

  onInputChange(value: string, index: number) {
    console.log(`Input ${index + 1} value changed:`, value);
  }

  onSelectChange(selectedValue: any, index: number) {
    console.log(`Ng-select ${index + 1} value changed:`, selectedValue);
  }
}

额外说明 #

• 如果一定要通过类名abc获取元素，可以在ngAfterViewInit中用document.querySelectorAll('.abc')手动查询DOM，但需注意Angular的变更检测周期
• ng-select的change事件会直接返回选中的值，无需通过nativeElement.selectedItems获取
• 建议给不同类型的控件设置不同的模板引用变量，避免逻辑混淆

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