PrimeNG表格内下拉框清除按钮无法正常工作求助

在Angular项目的PrimeNG p-table 组件内使用 p-dropdown 时，开启 [showClear]="true" 后能看到清除图标，但点击后无法清除选中值，反而弹出选项列表。其他页面使用相同组件时功能正常，仅在表格内出现该问题，调整padding样式后仍未解决。

相关代码 #

模板代码 #

<div class="grid" *ngIf="timeSheetControls.length > 0">
    <div class="col-12">
        <p-table [value]="timeSheetControls.controls" [scrollable]="true"
            [resizableColumns]="true" scrollHeight="430px">
            <ng-template pTemplate="header">
                <tr>
                    <th>Day</th>
                    <th>Shift</th>
                    <th>Client</th>
                    <th>Project</th>
                    <th>Task</th>
                    <th>Hours</th>
                    <th>Remarks</th>
                </tr>
            </ng-template>

            <ng-template pTemplate="body" let-control let-i="rowIndex">
                <tr [formGroup]="control">
                    <td><label>{{ formatDate(control.get('date').value) }}</label></td>
                    <td>
                        <p-dropdown [options]="employeeShift" formControlName="shift" [showClear]="true"
                            appendTo="body" placeholder="Select shift"></p-dropdown>
                    </td>
                    <td><input pInputText formControlName="client" placeholder="Client"></td>
                    <td><input pInputText formControlName="project" placeholder="Project"></td>
                    <td><input pInputText formControlName="task" placeholder="Task"></td>
                    <td><input style="width: 4vw;" pInputText formControlName="hours" placeholder="Hours"></td>
                    <td><input pInputText formControlName="remarks" placeholder="Remarks"></td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

组件内选项定义 #

employeeShift: any[] = ['6 AM - 3 PM', '2 PM - 11 PM', '6 PM - 3 AM'];

1. 标准化下拉选项格式 #

PrimeNG p-dropdown 期望options数组元素包含label和value字段（或通过optionLabel指定显示字段），直接传入字符串数组可能导致组件内部逻辑异常。修改为标准格式：

employeeShift: any[] = [
    { label: '6 AM - 3 PM', value: '6 AM - 3 PM' },
    { label: '2 PM - 11 PM', value: '2 PM - 11 PM' },
    { label: '6 PM - 3 AM', value: '6 PM - 3 AM' }
];

若不想修改数组结构，可在模板中指定optionLabel为当前元素：

<p-dropdown [options]="employeeShift" formControlName="shift" [showClear]="true"
    appendTo="body" placeholder="Select shift" optionLabel="." ></p-dropdown>

2. 阻止清除按钮的事件冒泡 #

表格行或单元格的点击事件可能冒泡，干扰清除按钮的默认行为。手动绑定事件并阻止冒泡：
首先给p-dropdown添加模板引用变量：

<p-dropdown #shiftDropdown [options]="employeeShift" formControlName="shift" [showClear]="true"
    appendTo="body" placeholder="Select shift"></p-dropdown>

然后在组件类中处理：

import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
    @ViewChildren('shiftDropdown') dropdowns: QueryList<Dropdown>;

    ngAfterViewInit() {
        this.dropdowns.forEach(dropdown => {
            setTimeout(() => {
                const clearIcon = dropdown.el.nativeElement.querySelector('.p-dropdown-clear-icon');
                if (clearIcon) {
                    clearIcon.addEventListener('click', (e: Event) => {
                        e.stopPropagation();
                        dropdown.clear();
                        dropdown.formControl.reset();
                    });
                }
            });
        });
    }

    // 其他方法...
}

3. 调整appendTo属性 #

appendTo="body"可能导致清除按钮的事件绑定失效，尝试移除该属性：

<p-dropdown [options]="employeeShift" formControlName="shift" [showClear]="true"
    placeholder="Select shift"></p-dropdown>

若必须保留appendTo，确保目标容器元素存在且无额外事件拦截。

4. 检查表单控件配置 #

确保shift表单控件允许空值，初始化时不要设置默认值，且验证规则不强制必填：

// 表单组初始化示例
addTimeSheetRow() {
    this.timeSheetControls.push(this.fb.group({
        date: [new Date(), Validators.required],
        shift: [''], // 初始为空，支持清除
        client: [''],
        project: [''],
        task: [''],
        hours: [''],
        remarks: ['']
    }));
}

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