Angular中如何使用ngx-translate实现select下拉选择器性别选项多语言翻译

第一步：检查翻译资源配置 #

首先确认你对应语言的翻译资源文件（比如zh-CN.json、en-US.json）中已经正确配置了所有性别对应的翻译Key，示例如下：

// zh-CN.json 中文配置示例
{
  "gender_male": "男",
  "gender_female": "女",
  "gender_undefined": "未知"
}

// en-US.json 英文配置示例
{
  "gender_male": "Male",
  "gender_female": "Female",
  "gender_undefined": "Unspecified"
}

第二步：修正模板写法 #

你的原有写法语法本身没有问题，可优化为更规范的属性绑定写法，调整后代码如下：

<div class="dropdown bootstrap-select">
  <select class="selectpicker" formControlName="gender" demon-ev="true" tabindex="-98" 
  (change)="changeGender($event)">
    <option value=""></option>
    <option *ngFor="let gender of genders" [value]="gender.code">
      {{ 'gender_' + gender.code | translate }}
    </option>
  </select>
</div>

第三步：排查翻译模块配置 #

如果调整后仍不生效，按以下顺序检查：

• 确认当前组件所属的模块imports数组中已经引入了TranslateModule
• 确认应用启动时已经调用TranslateService.use()方法加载了当前使用的语言包
• 可在模板中添加临时调试代码，确认拼接出的Key和资源文件中的Key完全匹配：

<div *ngFor="let gender of genders">调试Key：{{ 'gender_' + gender.code }}</div>

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