Angular：在 ngFor 中使用國際化 (i18n)

Question

我想使用 i18n 標簽翻譯一個 ngFor 循環。

這是我的代碼：

我的組件.component.ts

name: string;
people: string[];


ngOnInit(): void {
    this.name = 'Sam';
    this.people = ['Sam', 'Leo', 'Mark'];
}

我的組件.component.html

<!-- Error -->
<div class="myclass">
  <li i18n="@@translate" *ngFor="let person of people">
    <span>{person, select, name {name} other {other}}</span>
  </li>
</div>
<!-- Work -->
<div class="myclass">
  <span i18n="@@translate">{name, select, name {name} other {other}}</span>
</div>

消息，zh.hant.xlf

<trans-unit id="translate" datatype="html">
  <source>{VAR_SELECT, select, name {name} other{} }</source>
  <target>{VAR_SELECT, select, Sam {Trans_Sam} Leo {Trans_Leo} Mark {Trans_Mark} other {Trans_Other} }</target>
</trans-unit>

結果只得到一個“Trans_Sam”並得到這個錯誤：

ERROR Error: Unable to parse ICU expression in "{VAR_SELECT, select, Sam {Trans_Sam} Leo {Trans_Leo} Mark {Trans_Mark} other {Trans_Other}}" message.

我知道 ngx-traslate 但我想通過 i18n 標簽解決它。

謝謝。

Answer 1

只需將 i18n 移出 ngFor

<!-- should work -->
<div class="myclass">
  <li  *ngFor="let person of people">
    <span i18n="@@translate">{person, select, name {name} other {other}}</span>
  </li>
</div>
<!-- Work -->
<div class="myclass">
  <span i18n="@@translate">{name, select, name {name} other {other}}</span>
</div>