Angular Clarity框架下拉框显示文本与绑定值分离的实现问题

问题根因 #

你的代码存在3个核心问题导致agencyName无法动态更新：

1. 用单个全局变量存储agencyName，但是模板是通过*ngFor循环渲染所有机构选项，每个选项需要对应自己的机构名称，单个全局变量无法满足多选项的展示需求。
2. 数组相等判断逻辑错误：JS中数组是引用类型，this.nameFilter.value == ['xxxKjiSfMOK9WbG']这类判断永远返回false，所以你写的赋值逻辑从来没有执行过，agencyName一直停留在初始值。
3. 赋值逻辑写在Firestore查询的过滤流程中，只有触发列表查询时才会执行，筛选值变化时不会实时触发更新，视图自然不会同步变更。

解决方案 #

第一步：TS文件修改

首先删除原有写在查询逻辑里的agencyName赋值代码，新增机构ID和名称的映射表，后续新增机构直接修改这个映射表即可：

// 新增机构ID-名称映射表
agencyIdMap: Record<string, string> = {
  'xxxKjiSfMOK9WbG': '替换为对应机构实际名称1',
  'xxxJnVzGb5Icx08': '替换为对应机构实际名称2',
  // 后续新增机构直接在此处添加键值对
};

// 可选：如果需要在列头展示当前选中的机构名称，可新增以下方法
getSelectedAgencyNames(): string {
  if (!this.nameFilter?.value?.length) return '全部';
  return this.nameFilter.value.map(id => this.agencyIdMap[id] || id).join('、');
}

第二步：模板文件修改

直接在循环中通过当前遍历的agencyId从映射表中取对应名称，不需要依赖全局变量：

<ng-container *clrDgHideableColumn="{hidden: false}">
  <!-- 可选：列头展示选中的机构名称 -->
  Agency: {{getSelectedAgencyNames()}}
  <clr-dg-filter [clrDgFilter]="nameFilter">
    <clr-checkbox-wrapper *ngFor="let agencyId of nameFilterValues; index as i" (change)="updateNameFilter($event)">
      <input type="checkbox" name="name" clrCheckbox required [value]="agencyId" [checked]="nameFilter?.value?.includes(agencyId)" />
      <!-- 核心修改：直接从映射表取当前agencyId对应的名称 -->
      <label>{{agencyId }} {{agencyIdMap[agencyId]}}</label>
    </clr-checkbox-wrapper>
  </clr-dg-filter>
</ng-container>

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