Angular17+PrimeNG17.7：动态加载时替换多选框搜索图标为加载图标

针对Angular 17 + PrimeNG 17.7.0的场景，你可以通过自定义触发模板或动态绑定图标+样式两种方式实现加载状态下的图标切换，以下是具体实现：

前置准备 #

1. 在组件类中定义加载状态变量，以及搜索触发数据加载的方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-multiselect-demo',
  templateUrl: './multiselect-demo.component.html',
  styleUrls: ['./multiselect-demo.component.css']
})
export class MultiselectDemoComponent {
  isLoading = false;
  cities: any[] = [];
  selectedCities: any[] = [];

  // 搜索触发数据加载
  handleSearch(event: { query: string }) {
    this.isLoading = true;
    // 替换为实际的API请求逻辑
    setTimeout(() => {
      // 模拟获取到的城市数据
      this.cities = [
        { name: 'New York' },
        { name: 'London' },
        { name: 'Paris' }
      ];
      this.isLoading = false;
    }, 1200);
  }
}

方案一：自定义触发模板（推荐，完全控制显示） #

利用PrimeNG的trigger模板自定义下拉触发按钮的内容，根据加载状态切换图标，同时保留选中项的显示逻辑：

<p-multiSelect 
    [options]="cities" 
    [(ngModel)]="selectedCities" 
    placeholder="Select Cities"
    optionLabel="name" 
    display="chip" 
    [showClear]="true"
    [filter]="true"  <!-- 必须开启过滤才能显示搜索功能 -->
    (onSearch)="handleSearch($event)">
  <!-- 自定义触发区域模板 -->
  <ng-template pTemplate="trigger">
    <!-- 根据加载状态切换图标 -->
    <span class="p-multiselect-icon">
      <i *ngIf="!isLoading" class="pi pi-search"></i>
      <i *ngIf="isLoading" class="pi pi-spin pi-spinner"></i>
    </span>
    <!-- 保留选中项的标签显示 -->
    <span class="p-multiselect-label">
      {{ selectedCities.length > 0 ? selectedCities.map(c => c.name).join(', ') : 'Select Cities' }}
    </span>
  </ng-template>
</p-multiSelect>

方案二：动态绑定图标+样式 #

通过dropdownIcon动态切换图标名称，再添加CSS实现加载动画：

1. 模板代码：

<p-multiSelect 
    [options]="cities" 
    [(ngModel)]="selectedCities" 
    placeholder="Select Cities"
    optionLabel="name" 
    display="chip" 
    [showClear]="true"
    [filter]="true"
    (onSearch)="handleSearch($event)"
    [dropdownIcon]="isLoading ? 'pi-spinner' : 'pi-search'"
    [ngClass]="{ 'multiselect-loading': isLoading }">
</p-multiSelect>

2. 组件CSS：

.multiselect-loading .p-multiselect-trigger .pi-spinner {
  animation: pi-spin 1s linear infinite;
}

关键说明 #

• 必须开启[filter]="true"才能启用组件的搜索功能，否则不会触发onSearch事件。
• 自定义模板方案能更灵活控制触发区域的所有元素，包括图标、选中项文本的显示逻辑；动态绑定方案更简洁，但受限于组件默认结构。

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