Angular ngx translate:如何动态转换字符串数组
我想用ngx translate创建一周中的几天列表,但它不适用于异步管道。我得到了错误“error TS2769:No重载匹配此调用”。我必须使用JSON文件 TS:Angular ngx translate:如何动态转换字符串数组,angular,ngx-translate,Angular,Ngx Translate,我想用ngx translate创建一周中的几天列表,但它不适用于异步管道。我得到了错误“error TS2769:No重载匹配此调用”。我必须使用JSON文件 TS: MON:Observable=this.translate.get('CALENDAR.MON'); TUE:Observable=this.translate.get('CALENDAR.TUE'); WED:Observable=this.translate.get('CALENDAR.WED'); THU:Observab
MON:Observable=this.translate.get('CALENDAR.MON');
TUE:Observable=this.translate.get('CALENDAR.TUE');
WED:Observable=this.translate.get('CALENDAR.WED');
THU:Observable=this.translate.get('CALENDAR.THU');
FRI:Observable=this.translate.get('CALENDAR.FRI');
SAT:Observable=this.translate.get('CALENDAR.SAT');
SUN:Observable=this.translate.get('CALENDAR.SUN');
daysOfWeeks:string[]=[`this.MON}`、`this.TUE}`、`this.WED}`、`this.THU}`、`this.FRI}`、`this.SAT}`、`this.SUN}`;
建造师(
公共翻译:翻译服务
) { }
HTML:
{{day | async}
我还尝试将管道直接用于ngFor,但仍然不起作用。我将分享两种解决此问题的方法 1-你可以使用 瞬间(键:字符串|数组,插值图?:对象): 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>
const daysOfWeeks=[“周一”、“周二”、“周三”]
{{day | translate}}
它负责自动翻译,进行语言变化检测,然后再次翻译
因此,这是一种更好的解决您的问题的方法。谢谢,但我需要从i18n文件夹中的JSON文件导入字符串是的,它的转换管道正在幕后使用它。translateService也在使用它。
//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
const daysOfWeeks = ["Monday", "Tuesday", "Wednesday"]
<div *ngFor="let day of daysOfWeeks">{{ day | translate}}</div>