如何在父组件中用Ngx-Translate翻译下拉列表全局变量值？

你的问题核心是错误使用了Ngx-Translate的API：instant和get方法仅接受翻译键（字符串/字符串数组）作为参数，直接传入对象数组的话，方法无法识别需要翻译的字段，因此既无效果也无报错。

下面是在父组件中完成翻译的正确方式：

1. 先准备翻译文件 #

确保你的i18n翻译文件（如en.json、zh.json）中包含对应颜色的键值对：

// en.json
{
  "red": "Red",
  "blue": "Blue",
  "green": "Green"
}

// zh.json
{
  "red": "红色",
  "blue": "蓝色",
  "green": "绿色"
}

2. 父组件中翻译列表 #

方式一：使用instant（需确保翻译文件已预加载） #

如果你的翻译文件在应用初始化时已加载（比如通过APP_INITIALIZER预加载），可以直接遍历列表翻译color字段：

ngOnInit() {
  this.someList = this.someList.map(item => ({
    ...item,
    color: this.translation.instant(item.color)
  }));
}

方式二：使用get（异步加载翻译） #

如果翻译文件是懒加载的，用get批量获取翻译后再映射回列表：

ngOnInit() {
  // 提取所有需要翻译的color键
  const colorKeys = this.someList.map(item => item.color);
  
  this.translation.get(colorKeys).subscribe(translations => {
    this.someList = this.someList.map(item => ({
      ...item,
      color: translations[item.color]
    }));
  });
}

3. 支持语言切换（可选） #

如果需要在用户切换语言时自动更新列表翻译，可以监听语言变化事件：

ngOnInit() {
  this.translateList();
  // 监听语言切换，重新翻译
  this.translation.onLangChange.subscribe(() => {
    this.translateList();
  });
}

private translateList() {
  this.someList = this.someList.map(item => ({
    ...item,
    color: this.translation.instant(item.color)
  }));
}

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