如何使用Record显示与后端写入的值不同的值

Question

我有这个 HTML

 <unified-platform-drop-down-list
                [name]="MeetingToolPropertyType.ClientType"
                [options]="clientTypeOptions$"
                [isRequired]="false" class="input-width"
                [parentFormGroup]="optionsFormGroup"
                [uniqueId]="'id'"
                [isHorizontal]="true">
              </unified-platform-drop-down-list>

还有这个TS：

clientTypeOptions$ = new BehaviorSubject<string[]>(Object.values(ClientTypeRecord));

export enum ClientTypeInputEnum {
  TEAMDesktop = 'TEAMS Desktop',
  TEAMSWeb = 'TEAMS Web'
}

export const ClientTypeRecord: Record<ClientTypeInputEnum, string> = {
  [ClientTypeInputEnum.TEAMDesktop]: 'TEAMS Desktop',
  [ClientTypeInputEnum.TEAMSWeb]: 'TEAMS Web'
};

我从后端获得的值看起来像这样 TEAMSDesktop |团队网站。选择、保存、刷新页面后，用户看到的是后端格式的值。

我需要它以类似 ClientTypeInputEnum 的格式显示它。

Answer 1

好吧，经过多次尝试，这对我有用

  override ngOnInit(): void {
    super.ngOnInit();
    
    this.meetingsGroup = this.formGroupDir.control.get('meetings') as FormGroup;
    const value = this.meetingsGroup.get('options.clientType')?.value;
    const enumValue = this.mapBackendValueToEnum(value);
    this.meetingsGroup.get('options.clientType')?.patchValue(enumValue);
}


mapBackendValueToEnum(backendValue: string): string {
    switch (backendValue) {
      case 'TEAMDesktop':
        return ClientTypeInputEnum.TEAMDesktop;
      case 'TEAMSWeb':
        return ClientTypeInputEnum.TEAMSWeb;
      default:
        return backendValue;
    }
  }