Javascript Angular中动态内容的国际化？

Angular.io对i18n标签的描述如下：

角度i18n属性标记可翻译的内容。放在 要翻译其固定文本的每个元素标记

所以我的问题是。如果我有一个内容为动态的元素怎么办？以下表为例，它显示了一个资产列表。“描述”栏在某些情况下需要使用英语，在某些情况下需要使用其他语言

    <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>

按时
休息
资产
描述
{{asset.timeon}
{{asset.timeoff}
{{asset.assetlabel}}
{{asset.description}}

我是这样想的：

    <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>

按时
休息
资产
描述
{{asset.timeon}
{{asset.timeoff}
{{asset.assetlabel}}
{{asset.description}}

---

……但我错了。有什么建议吗？

首先，i18n值是一个ID，因此它总是静态的

第二，就翻译发生变化的内容而言，我唯一的成功就是在模板中使用了一种变通方法

在本例中，

thingStatus

是您的变量，其可能值为“good”、“bad”和“unknown”。所有这些都将是一个单独的翻译项，具有自己的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>

坏

使用此结构

<span
  i18n="status text|Status text@@statusText"
>{
  asset.statusLangCode, select,

  bad {Bad}
  good {Good}

  other {Unknown}
}</span>

{
asset.statusLangCode，选择，
坏{坏}
好{好}
其他{未知}
}

在翻译文件中，将生成这样的构造（手动添加目标）

{VAR\u SELECT，SELECT，good{good}bad{bad}other{Unknown}
{VAR_SELECT，SELECT，good{П砦砦砦砦}bad{П砦砦砦砦}

有关更多信息，请参见
假设您的后端服务返回已知的可能值，您可以执行以下操作：

const values = ['admin', 'teacher', 'librarian']

将翻译后的值添加到
sv_SE.json
中，并将前面的值作为键

role: {
  "admin": "admin",
  "teacher": "lärare",
  "librarian": "Bibliotekarie"
}

在你的
app.component.html

<div *ngFor="let value of values">
{{ ('role.' + value) | translate }}
</div>


{{（'role.'+value）{翻译}
Angular i18n是静态的，而不是动态的。
<div *ngFor="let value of values">
{{ ('role.' + value) | translate }}
</div>