[英]ngx-translate and *ngFor
我有這個代碼
<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 }}
{{ 'something' | translate }}
,其中“某物”放置在 .json 文件中
"something" : "translation"
那么如何在 ngFor 狀態下使用它呢? 它從 .json 中讀取了一個對象,但不是我需要的對象數組
首先,您需要在 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]
}
})
]
...
然后你需要在資產下有兩個文件,一個是英語的 fi 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>
請注意,您的服務對象必須包含字符串形式的內容,以便可以進行翻譯。
use translate.get('jsonKey').subscribe( (response: any)=> {
services = response;
});
注意 - //確保您的 json 結構正確
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.