如何判断触发事件的是哪个p-dropdown组件

这里有几种简单直接的方法来区分两个调用同一callMethod的p-dropdown组件：

方法1：传递自定义标识参数 #

直接在模板调用方法时额外传入一个区分标识，比如下拉组件对应的类别名称：

模板代码修改： #

<!-- Fruit List -->
<p-dropdown
  (onChange)="callMethod($event, 'fruit')"
  formControlName="fruit"
  ...
>
</p-dropdown>

<!-- Vegetable List -->
<p-dropdown
  (onChange)="callMethod($event, 'vegetable')"
  formControlName="vegetable"
  ...
>
</p-dropdown>

组件中的方法实现： #

callMethod(event: DropdownChangeEvent, type: string) {
  // 根据type区分处理逻辑
  if (type === 'fruit') {
    // 处理水果下拉的逻辑
    console.log('水果下拉触发', event.value);
  } else if (type === 'vegetable') {
    // 处理蔬菜下拉的逻辑
    console.log('蔬菜下拉触发', event.value);
  }
}

方法2：利用事件对象的source属性 #

PrimeNG的DropdownChangeEvent自带source属性，指向触发事件的p-dropdown组件实例。你可以通过这个实例的属性（比如自定义id或绑定的formControlName）来区分：

模板代码（无需额外参数）： #

<!-- Fruit List -->
<p-dropdown
  (onChange)="callMethod($event)"
  formControlName="fruit"
  id="fruit-dropdown"
  ...
>
</p-dropdown>

<!-- Vegetable List -->
<p-dropdown
  (onChange)="callMethod($event)"
  formControlName="vegetable"
  id="vegetable-dropdown"
  ...
>
</p-dropdown>

组件中的方法实现： #

import { DropdownChangeEvent } from 'primeng/dropdown';

callMethod(event: DropdownChangeEvent) {
  // 通过id区分
  const dropdownId = event.source.id;
  if (dropdownId === 'fruit-dropdown') {
    // 水果下拉逻辑
  } else if (dropdownId === 'vegetable-dropdown') {
    // 蔬菜下拉逻辑
  }

  // 或者通过绑定的formControlName区分
  const controlName = (event.source as any).formControlName;
  if (controlName === 'fruit') {
    // 对应处理
  }
}

方法3：通过FormGroup的控件名称区分 #

如果两个下拉组件已经绑定了formControlName，可以直接在方法中通过当前触发的控件名称来判断：

组件中的方法实现： #

callMethod(event: DropdownChangeEvent) {
  // 获取当前控件对应的FormControl
  const control = this.yourFormGroup.get((event.source as any).formControlName);
  if (control) {
    const controlName = control.name;
    if (controlName === 'fruit') {
      // 处理水果下拉
    } else if (controlName === 'vegetable') {
      // 处理蔬菜下拉
    }
  }
}

以上几种方法都能快速区分两个下拉组件，其中方法1是最直观易维护的，推荐优先使用。

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