更新

Question

我正在使用角度制作多语言应用。我正在显示一个类别列表。 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管道或自定义管道。

但是如果您在示例中执行动态绑定，您可以使用一些全局方法来检查所选语言的条件，如下所示 -

<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

Answer 2

我认为您应该在数据库和服务器端保存您的标签名称，当您发送请求以检索字段数据时，标签名称将在json中运行并运行* ngfor。

服务器端的json：

form1 = { ar : [
  {
    name: 'راقب'
  },
  {
    name: 'ألعاب الأطفال'
  }
], en : [
  {
    name: 'Watches'
  },
  {
    name: 'Toys'
  }
], ... another lang]

form2 = {}和另一种形式

var listOfLabel = fom1 ['langComingFromClintSide']; response.send（listOfLabel）;

您的代码更改：

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

根据所选语言从模型中渲染标签

2 个答案:

更新

Working example