Angular：以角度转换动态变量值

Question

我已经使用 json 文件实现了静态单词的多语言翻译，其翻译如下：

{
  "Sign In": {
    "en": "Sign In",
    "nl": "Inloggen",
    "fr": "Se connecter",
    "de": "Anmeldung"
  }
}

创建了一个语言service.ts文件，如下所示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Subject } from 'rxjs';


@Injectable({
  providedIn: 'root'
})

export class LanguageService {

  public translations: any;
  private langSubject = new Subject<any>();
  langSubject$= this.langSubject.asObservable()

   constructor(private http: HttpClient) {
       this.loadTranslations().subscribe(translations => {
       this.translations = translations;
   });
}

loadTranslations(): Observable<any> {
    return this.http.get<any>('../assets/words.json').pipe(
    tap((translations: any) => {
       this.translations = translations;
     })
   );
 }

 declareLangChange(lang: any){
   this.langSubject.next(lang)
 }

 translate(key: string, lang: string): string {
  if (!this.translations) return '';
    const defaultTranslation = (this.translations[key]?.en || ''); // English translation
    return this.translations[key]?.[lang] || defaultTranslation;
  }
}

在 ngOnit() 上称为翻译器函数的主组件中：

this.ls.langSubject$.subscribe((lang:any)=>{
    this.selectedLang=lang;
})

translateWord(key: string): string {
    return this.ls.translate(key, this.selectedLang);
}

在html文件中传递了需要在函数中翻译的静态单词：

{{ translateWord('Sign In') }}

现在我需要**

• 翻译来自 API 动态数据的值

**。我正在获取颜色名称对象，其中我只需要翻译一个错误翻译的颜色名称。

下面的函数调用 api 并将响应存储在多个变量中，其中之一是 colorList。在此变量中存储的响应中，我们有“绿色”颜色，我们需要自定义翻译，就像我们对静态单词所做的那样。

getSideFilterData(category_id: any) {
    let body = {
    id: category_id,
    buyer_country: this.gs.loginData.country || ''
}


this.gs.getSidebarFilterData(body).subscribe(async (resp: any) => {
  if (resp['status']) {
    for (let j in resp.colors) {
      resp.colors[j] = {
        color: resp.colors[j]
      }
    }

    
    for (let j in resp.brands) {
      if (resp.brands[j].brand_id == this.cartBrandId) {
        resp.brands[j].isCheckedBrand = true;
      }
    }

      // Filter Array
      this.brandList = resp.brands;
      this.colorsList = resp.colors;
      this.colorFamily = resp.colorFamily;
      this.finishTypeList = resp.finishType;
      this.materialTypeList = resp.materialType;
    } else {
      this.brandList = [];
      this.colorsList = [];
      this.colorFamily = [];
      this.finishTypeList = [];
      this.materialTypeList = [];
    }

  }, (error: any) => {
    console.log('error', error);
  });
}

任何有关翻译动态值的帮助将不胜感激。预先感谢！

Answer 1

为什么你不使用 NGX-translate 的

variable | translate

管道？