下拉列表中的文本应该不同于值答案

【问题标题】：text in dropdown should be different than value下拉列表中的文本应该不同于值
【发布时间】：2021-07-05 16:11:05
【问题描述】：

我的模板中有一个下拉菜单，它使用清晰框架在 Angular 中。该值需要是机构 ID，因为只有它是我的对象的一部分。但我希望显示的文本是机构名称。我已经尝试了很多方法来做到这一点，但到目前为止还没有运气。这是我最近的尝试：

ts 文件

  agencyName = 'xxx';

  caregivers$: Observable<Caregiver[]> = combineLatest([this.pagination$, this.filters$]).pipe(
    switchMap(([pagination, filters]) => {
      return this.afs
        .collection<Caregiver>('caregivers', (ref) => {
          let query: any = ref;

          if(filters) {
          for (const filter of filters) {
            if (filter.property === "onboardingCompleted") {
              const value = JSON.parse(filter.value);
              query = query.where(filter.property, "==", value)
            }
            if (filter.property === 'agency.agencyId') {
              query = query.where(filter.property, 'in', filter.value)
            }

            if (this.nameFilter.value == ['xxxKjiSfMOK9WbG']) {
              this.agencyName = 'xxx';
            } else if (this.nameFilter.value == ['xxxJnVzGb5Icx08']) {
              this.agencyName = 'xxx';
            }


            console.log(this.nameFilter.value);
            console.log(this.agencyName);
          }
        }

          if (pagination.after) {
            query = query
              .orderBy('firstName', 'asc')
              .orderBy('caregiverId')
              .startAfter(
                pagination.after.firstName,
                pagination.after.caregiverId
              )
              .limit(pagination.limit);
          } else if (pagination.before) {
            query = query
              .orderBy('firstName', 'asc')
              .orderBy('caregiverId')
              .endBefore(
                pagination.before.firstName,
                pagination.before.caregiverId
              )
              .limitToLast(pagination.limit);
          } else {
            query = query.orderBy('firstName', 'asc').limit(pagination.limit);
          }
          return query;
        })
        .valueChanges()
        .pipe(
          tap(console.log),
          tap((caregiversArray) => {
            const caregivers = caregiversArray;
            this.updateState({ ...STATE, caregivers });
          })
        );
    })
  );

这是我的模板

 <ng-container *clrDgHideableColumn="{hidden: false}">
        Agency
        <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)" />
            <label>{{agencyId }} {{agencyName  }}</label>
<!--            <div *ngFor="let name of name">-->
<!--            <div>{{name.name}}</div></div>-->
          </clr-checkbox-wrapper>
        </clr-dg-filter>
      </ng-container>

机构名称保持不变。我希望它根据下拉列表中选择的内容进行更改。

【问题讨论】：

标签： angular checkbox vmware-clarity

【解决方案1】：

我将问题修复如下：我在我的界面中添加了这个：

export const AgencyName = [
  {
    name: 'xxx',
    agencyId: 'xxxPPpKjiSfMOK9WbG'
  },
  {
    name: 'xxx',
    agencyId: 'xWcJnVxxzGb5Icx08'
  }

我将模板更改如下：

 <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        Agency
        <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)"/>
           <label *ngFor="let name of name"><div class="agency-name" *ngIf="agencyId == name.agencyId">{{name.name}}</div></label>
          </clr-checkbox-wrapper>
        </clr-dg-filter>
      </ng-container>
    </clr-dg-column>

【讨论】：

【解决方案2】：

尝试将以下指令添加到您的自定义选择标签：

[(ngModel)]="agencyName"

【讨论】：

我想出了一个解决方案并发布了它。我现在的问题是过滤器下拉菜单中的间距太大，因为我使用了 div。我不知道如何解决这个问题。我尝试将 ngIf 放在所有其他可能的位置，但它与格式混淆，或者根本没有显示名称