时间戳

首页 > 解决方案 > ngx-translate：如何动态翻译字符串数组

angular - ngx-translate：如何动态翻译字符串数组

问题描述

我想用 ngx-translate 创建一周中的几天列表，但它不适用于异步管道。我有错误“错误 TS2769：没有重载匹配此调用。” 我必须使用 JSON 文件。

TS：

    MON:Observable<string> = this.translate.get('CALENDAR.MON');
      TUE:Observable<string> = this.translate.get('CALENDAR.TUE');
      WED:Observable<string> = this.translate.get('CALENDAR.WED');
      THU:Observable<string> = this.translate.get('CALENDAR.THU');
      FRI:Observable<string> = this.translate.get('CALENDAR.FRI');
      SAT:Observable<string> = this.translate.get('CALENDAR.SAT');
      SUN:Observable<string> = this.translate.get('CALENDAR.SUN');
    
    
    
      daysOfWeeks:string[] = [`${this.MON}`, `${this.TUE}`, `${this.WED}`, `${this.THU}`, `${this.FRI}`, `${this.SAT}`, `${this.SUN}`];

 constructor(
      public translate: TranslateService
    ) { }

HTML：

 <div *ngFor="let day of daysOfWeeks">{{ day | async}}</div>

我也尝试将管道直接用于 ngFor，但仍然无法正常工作。

标签： angularngx-translate

解决方案

我将分享两种解决此问题的方法。

1-您可以使用translateService.instant

instant(key: string|Array, interpolateParams?: Object): string|Object: 获取键（或键数组）的即时转换值。/!\ 这个方法是同步的，默认的文件加载器是异步的。您有责任知道您的翻译何时已加载，并且使用此方法是安全的。如果您不确定，那么您应该使用 get 方法。

像这样

//for single
    const traslateSingle :string =  this.translateService.instant("Monday"); // translated "Monday"

//for list
    const transaletedList = ["Monday", "Tuesday", "Wednesday"].map(x=> this.translateService.instant(x)) // translated Week days

但是它有自己的问题，如果没有加载翻译怎么办？如果语言选择发生了变化，现在您有责任获取更新的翻译

2-使用翻译管道component.html

const daysOfWeeks = ["Monday", "Tuesday", "Wednesday"]
 <div *ngFor="let day of daysOfWeeks">{{ day | translate}}</div>

它负责并自动翻译文本并检测语言变化然后再次翻译。

所以它是解决您问题的更好方法。

推荐阅读