Angular i18n 如何翻译选择选项

Jul*_*enT 5 internationalization angular-i18n angular

我正在 Angular 7 上开发反应式表单,我需要使用 制作一个下拉列表,并且需要将选项从英语翻译为法语。选项在我的 Ts 文件中设置。我听说过 ICU 表达式,我读过文档,但我不明白它如何适合我的情况。有人可以帮助我吗?

我的HTML:

<select name="material" class="form-control input-underline input-lg" formControlName="material"
              [(ngModel)]="portal.material" type="text" required i18n>
   <option selected disabled value=undefined [ngValue]="null">Select a material</option>
   <option *ngFor="let item of material_tab" [ngValue]="item">{{item.name}}</option>    
</select>
Run Code Online (Sandbox Code Playgroud)

我的T:

materials_tab = [{ name: 'Wood' }, { name: 'Cardboard' }, { name: 'Plastic' }, { name: 'Paper' }, { name: 'Glass' }, { name: 'Metal' }, { name: 'Other' }];
Run Code Online (Sandbox Code Playgroud)

提前致谢。

Jul*_*enT 3

抱歉回复晚了,我终于做到了。

\n

我的HTML:

\n
<option *ngFor="let item of materials_tab" [ngValue]="item" i18n>{item, select, Wood {Wood} Cardboard {Cardboard} Plastic {Plastic} Paper {Paper} Glass {Glass} Metal {Metal} Other {Other}}</option>\n
Run Code Online (Sandbox Code Playgroud)\n

我的TS:

\n
materials_tab = ['Wood', 'Cardboard', 'Plastic', 'Paper', 'Glass', 'Metal', 'Other'];\n
Run Code Online (Sandbox Code Playgroud)\n

i18n 执行后会出现翻译(这里是法语):

\n
<source>{VAR_SELECT, select, Wood {Wood} Cardboard {Cardboard} Plastic {Plastic} Paper {Paper} Glass {Glass} Metal {Metal} Other {Other} }</source><target state="new">{VAR_SELECT, select, Wood {Bois} Cardboard {Carton} Plastic {Plastique} Paper {Papier} Glass {Verre} Metal {M\xc3\xa9tal} Other {Autre} }</target>\n
Run Code Online (Sandbox Code Playgroud)\n

这个解决方案的唯一问题是,如果你有一个很长的列表需要翻译,它就会变得不可读......

\n

我希望这会对某人有所帮助。

\n