TS中ng-multiselect-dropdown配置翻译返回undefined如何解决

问题根因 #

你自定义的getTranslation函数存在异步时序问题：this.translateSvc.get()返回的是异步Observable，你在subscribe回调里给translation赋值之前，函数就已经把未初始化的translation返回了，所以配置项拿到的都是undefined。

解决方案 #

方案1：使用同步instant方法（推荐，翻译资源提前加载完成场景） #

直接替换翻译函数的实现，用@ngx-translate内置的同步取值方法：

getTranslation(toTranslate: string): string {
  try {
    return this.translateSvc.instant(toTranslate);
  } catch (e) {
    return toTranslate; // 异常时返回原key作为兜底，避免出现undefined
  }
}

该方案前提是你的翻译资源已经在应用初始化阶段预加载完成，不会出现资源未加载就调用的情况。

方案2：等待翻译异步返回后再初始化配置 #

如果翻译资源是异步懒加载的，可以批量请求需要的翻译key，全部返回后再初始化下拉配置：

import { forkJoin } from 'rxjs';

// 批量请求所有需要的翻译项
const transKeys = ['Selecionar tudo', 'Limpar', 'Buscar'];
forkJoin(transKeys.map(key => this.translateSvc.get(key))).subscribe(([selectAllText, unSelectAllText, searchPlaceholderText]) => {
  this.countryDropdownSettings = {
    singleSelection: false,
    idField: 'countryId',
    textField: 'name',
    selectAllText,
    unSelectAllText,
    itemsShowLimit: 1,
    allowSearchFilter: true,
    searchPlaceholderText
  };
});

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