Primeng Multiselect筛选懒加载值：如何等待API响应再显示结果？

我想在PrimeNG Multiselect组件中，从API响应加载并展示筛选结果。当前问题是：当搜索内容不在本地options变量中时，组件会立刻显示No results found提示，但我希望等待API请求完成后，如果返回数据就展示对应选项，确实无数据再显示该提示。另外，清空搜索框后下拉菜单要能正常显示新加载的值。我用setTimeout模拟API延迟，向msOptions添加数据，但不确定代码哪里有问题。

现有代码 #

HTML部分 #

<p-multiSelect
  (onFilter)="load($event)"
  [options]="msOptions"
  defaultLabel="Select..."
></p-multiSelect>

TypeScript部分 #

load(event) {
  console.log('event is ', event);
  setTimeout((r) => {
    if (event.filter.includes('xyz')) {
      for (let i of [4, 5, 7, 9, 10, 43]) {
        this.msOptions.push({ label: 'xyz' + i, value: 'xyz' + i });
      }
    }
  }, 1000);
}

问题核心是Multiselect默认基于本地数据实时筛选，API请求延迟期间无匹配项就会提前显示无结果提示。通过以下调整实现需求：

1. 添加加载状态标记 + 优化数据更新逻辑 #

在组件中增加加载状态变量，控制无结果提示的显示时机，同时确保数据更新能触发Angular变更检测：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msOptions: any[] = [];
  isLoading = false;

  load(event) {
    const filterText = event.filter.trim();
    
    // 清空搜索框时重置状态
    if (!filterText) {
      this.isLoading = false;
      return;
    }

    this.isLoading = true;
    // 模拟API请求
    setTimeout(() => {
      this.isLoading = false;
      if (filterText.includes('xyz')) {
        // 用扩展运算符重新赋值数组，触发变更检测
        const newOptions = [4, 5, 7, 9, 10, 43].map(i => ({ 
          label: `xyz${i}`, 
          value: `xyz${i}` 
        }));
        this.msOptions = [...this.msOptions, ...newOptions];
      }
    }, 1000);
  }
}

2. 修改模板控制提示显示 #

通过emptyFilterMessage结合加载状态，在请求期间隐藏无结果提示：

<p-multiSelect
  (onFilter)="load($event)"
  [options]="msOptions"
  defaultLabel="Select..."
  [emptyFilterMessage]="isLoading ? '' : 'No results found'"
  [loading]="isLoading"
></p-multiSelect>

关键说明 #

• 加载状态控制：请求进行时将emptyFilterMessage设为空，避免提前显示无结果提示；请求完成后再根据实际数据决定是否展示提示。
• 变更检测触发：用扩展运算符重新赋值数组（而非push），确保Angular能感知到数据变化并更新组件视图。
• 清空搜索处理：检测到搜索框清空时重置加载状态，保证下拉菜单正常显示所有已加载选项。

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