Angular Dropdown使用slice:0:50后选中超范围值UI不显示问题求解

问题根因 #

当前问题的核心是slice:0:50管道只将前50条数据渲染为DOM节点，当选中值对应的选项不在这50条范围内时，下拉组件找不到匹配的<nx-dropdown-item>节点，因此无法正确回显选中的文本。

可行解决方案 #

方案1：调整渲染列表逻辑，强制包含已选中项 #

修改数据处理流，保证已选中的选项永远在渲染的列表内，不会被slice过滤掉。

1. 组件内提前存储全量的选项数据，修改Observable流的处理逻辑：

// 全量选项存储，提前从接口获取后保存
allProfessionOptions: Profession[] = [];

occupationProfessionChanges$ = this.originalProfessionData$.pipe(
  map(allList => {
    const selectedCode = this.professionFormControl.value;
    const top50List = allList.slice(0, 50);
    // 检查选中项是否在渲染列表内，不在就加入
    if (selectedCode && !top50List.find(item => item.code === selectedCode)) {
      const selectedItem = allList.find(item => item.code === selectedCode);
      return selectedItem ? [selectedItem, ...top50List] : top50List;
    }
    return top50List;
  })
);

2. 模板中移除slice管道，直接使用处理后的流：

<nx-dropdown-item
    *ngFor="let profession of occupationProfessionChanges$ | async"
    [nxValue]="profession?.code"
    attr.data-id="{{ 'occupationProfession-' + profession.code }}"
    >
    {{ profession?.name }}
</nx-dropdown-item>

方案2：自定义选中态显示文本，不依赖渲染的下拉选项 #

利用下拉组件的自定义label能力，直接通过选中的code从全量数据匹配显示文本，不用等待下拉选项渲染。

1. 模板中添加自定义label模板：

<nx-dropdown [formControl]="professionFormControl">
  <!-- 自定义选中后的显示内容 -->
  <ng-template nxDropdownLabel>
    {{ getProfessionNameByCode(professionFormControl.value) }}
  </ng-template>
  <nx-dropdown-item
    *ngFor="let profession of occupationProfessionChanges$ | async | slice: 0:50"
    [nxValue]="profession?.code"
    attr.data-id="{{ 'occupationProfession-' + profession.code }}"
    >
    {{ profession?.name }}
  </nx-dropdown-item>
</nx-dropdown>

2. 组件内添加匹配方法：

allProfessionOptions: Profession[] = []; // 存储全量200条选项数据

getProfessionNameByCode(code: string): string {
  const target = this.allProfessionOptions.find(item => item.code === code);
  return target ? target.name : '';
}

方案3：使用虚拟滚动替代slice硬截断 #

200条数据量级很小，直接启用虚拟滚动既可以保证性能，又能渲染所有选项，从根源解决回显问题。可以使用Angular CDK虚拟滚动，或者nx-dropdown自带的虚拟滚动配置，不需要再用slice管道截断数据。

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