javascript - 根据所选语言渲染模型中的标签

Question

我正在使用 angular 制作一个多语言应用程序。我正在显示类别列表。 api 响应是这样的:

[
  {
    name_en: 'Watches',
    name_ar: 'راقب'
  },
  {
    name_en: 'Toys',
    name_ar: 'ألعاب الأطفال'
  }
]

我在这个数组上循环显示:

<label *ngFor='let item of items'>{{item.name_en}}</label>

在选择阿拉伯语时，我想在标签中显示 name_ar 而不是 name_en。如何实现？我也可以有超过两种语言。

PS:我总是可以将语言传递给服务器并根据当前语言检索字段，但我正在寻找一种解决方案来动态地执行此操作并一次将所有字段放入

Answer 1

如果是静态内容，您可以使用某种translate 管道或您自定义的管道。

但是如果像您在示例中所做的那样进行动态绑定(bind)，您可以使用一些全局方法来检查您选择的语言的条件，就像这样 -

<label *ngFor='let item of items'>{{parseLanguage(item)}}</label>

parseLanguage(item) {
  if(this.selectedLang == 'X'){ return item.name_ar}
  else return item.name_en
}

或者另一种方法是根据所选语言从服务器获得唯一的单一响应。

更新

我为此创建了一个管道，它接受包含 diff 值的整个对象。语言并根据选择的语言返回，希望这对你有用 -

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'translate'})

export class TranslatePipe implements PipeTransform  {
  languageSelected: string;

  constructor() { }

  transform(value) {
    console.log(value, 'in pipe'); 
    // Made a check for global language selected and return accordingly

    if(this.languageSelected == 'arabic'){
      return value.name_ar;
    }
    else {
      return value.name_en;
    }
  }
}


<p *ngFor='let item of items'>
  {{item | translate}}
</p>

Working example