angular - 下拉列表中的文本应该不同于值

问题描述

我的模板中有一个下拉列表，它使用清晰框架在 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>

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

标签： angularcheckboxvmware-clarity

angular - 下拉列表中的文本应该不同于值

问题描述

解决方案

推荐阅读