動的コンテンツの国際化はAngular？次のように

Question

Angular.ioは、国際化タグを説明します。

角度国際化属性は、翻訳可能なコンテンツをマーク。固定テキストを翻訳するすべての要素タグを に配置します。

私の質問はこれです。内容がの要素を動的に持つとどうなりますか？たとえば、資産のリストを示す表の下の表を参照してください。 「説明」という列は、場合によっては英語である必要があり、場合によっては他の言語である必要があります。

<table class="asset-table"> 
     <thead> 
     <tr> 
      <th i18n="@@alarm-list-timeon">Time On</th> 
      <th i18n="@@alarm-list-timeoff">Time Off</th> 
      <th i18n="@@alarm-list-asset">Asset</th> 
      <th i18n="@@alarm-list-description">Description</th> 
     </tr> 
     </thead> 
     <tbody *ngIf="showAssets"> 
     <tr *ngFor="let asset of pageItems"> 
      <td>{{asset.timeon}}</td> 
      <td>{{asset.timeoff}}</td> 
      <td>{{asset.assetlabel}}</td> 
      <td i18n="@@{{asset.description}}">{{asset.description}}</td> 
     </tr> 
     </tbody> 
    </table> 

を...しかし、私は間違っていた：

<table class="asset-table"> 
     <thead> 
     <tr> 
      <th i18n="@@alarm-list-timeon">Time On</th> 
      <th i18n="@@alarm-list-timeoff">Time Off</th> 
      <th i18n="@@alarm-list-asset">Asset</th> 
      <th i18n="@@alarm-list-description">Description</th> 
     </tr> 
     </thead> 
     <tbody *ngIf="showAssets"> 
     <tr *ngFor="let asset of pageItems"> 
      <td>{{asset.timeon}}</td> 
      <td>{{asset.timeoff}}</td> 
      <td>{{asset.assetlabel}}</td> 
      <td i18n>{{asset.description}}</td> 
     </tr> 
     </tbody> 
    </table> 

私はこのような何かを考えていました。助言がありますか？

Answer 1

まず、i18nの値はIDなので、常に静的になります。

第2に、変更内容を翻訳する限り、テンプレート内でNgSwitchを使用する回避策があります。

この例では、thingStatusが変数です。値は「良い」、「悪い」、「不明」です。これらはすべてそれぞれ独自のi18n ID値を持つ別々の翻訳アイテムです。

明らかに、thingStatusが管理できない可能性のある可能性がある場合、これは失敗します。

<div [ngSwitch]="thingStatus"> 
     <p *ngSwitchCase="good" i18n="status_good>Good</p> 
     <p *ngSwitchCase="bad" i18n="status_bad>Bad</p> 
     <p *ngSwitchCase="unknown" i18n="status_unknown>Unknown</p> 
    </div>