Визуализация метки из модели на основе выбранного языка

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

я думаю, что вы должны сохранить имя метки в базе данных и на стороне сервера, и когда вы отправляете запрос на получение данных поля, имена меток приходят в 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>

Answer 2

В случае Статическое содержимое Вы можете использовать какой-либо тип 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>

Рабочий пример