ngx 翻译和 *ngFor答案

【问题标题】：ngx-translate and *ngForngx 翻译和 *ngFor
【发布时间】：2017-06-25 09:02:02
【问题描述】：

我有这个代码

<div *ngFor="let service of services">
    <span><img  [src]="service.imgPath" alt="{{ service.name }}"/></span>
    <h4>{{ service.name}}</h4>
    <p>{{ service.desc }}</p>
</div>

如何翻译每个具有 3 个参数的服务

在常规情况下，我使用 {{ 'something' | translate }} ，其中“某事”是放在.json文件中

"something" : "translation"

那么如何在 ngFor 状态下使用它呢？它从 .json 中读取了一个对象，但不是我需要的对象数组

【问题讨论】：

标签： angular typescript ngfor ngx-translate

【解决方案1】：

首先你需要在 app.component.ts 中导入 ngx-translate：

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
....
export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
}
...
imports: [
    ...
    TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
    })
]
...

然后你需要在 assets 下有两个文件，一个 f.i en.json 用于英语，另一个用于西班牙语，例如，es.json 包含两个对象。在 en.json 中：

{
  "something":  "something translation in English"
}

在 es.json 中：

{
  "something": "something translation in Spanish"
}

然后，在您提到的代码所在的组件中：

import { TranslateService } from '@ngx-translate/core';
...
constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
}
....

在模板中：

<div *ngFor="let service of services">
   <span><img  [src]="service.imgPath" alt="{{ service.name }}"/></span>
   <h4>{{service.name | translate}}</h4>
   <p>{{service.desc}}</p>
</div>

请注意，您的服务对象必须包含字符串形式的内容，以便进行翻译。

【讨论】：

【解决方案2】：

use translate.get('jsonKey').subscribe( (response: any)=> {

services = response;


});

注意 - //确保你的 json 结构是正确的

【讨论】：