角度：使用 ngx-translate 在模板中翻译对象数组的元素

Question

我一直在搜索如何使用模块 ngx-translate 翻译对象数组的值，这是我的代码的摘录，但我不知道如何实现 json 文件

模板 HTML :

 <div class="sort-header-container">
    <table matSort class="mat-sort">
      <tr *ngFor="let item of items" class="row">
        <td class="row">{{item.critere}}</td>
        <td>{{item.res}}</td>
      </tr>
    </table>
 </div>

服务中的对象数组：

items: any[] = [
    { critere: "Code-modèle", res: "Mizuno Shadow 4" },
    { critere: "Code Libellé", res: "KR32" },
    { critere: "Stock", res: 10 },
    { critere: "Prix TTC", res: "Bleu" },
    { critere: "Couleur", res: 42 },
    { critere: "Matière", res: 125 },
    { critere: "Zone", res: 100 },
  ];

我只需要翻译标准列

谢谢

Answer 1

您需要使用ngx-translate的TranslatePipe 。

<div class="sort-header-container">
    <table matSort class="mat-sort">
      <tr *ngFor="let item of items" class="row">
        <td class="row">{{item.critere | translate}}</td>
        <td>{{item.res}}</td>
      </tr>
    </table>
 </div>

确保您的critere字段在 json 翻译文件中具有相应的翻译

英文翻译示例：

{
  "Prix TTC": "Price",
  "Couleur": "Color",
}

Answer 2

摘自 ngx-translate github 中的示例

您可以在代码中使用翻译管道，如下所示：

 <td class="row">{{ item.critere | translate }}</td>

为此，您的critere需要是语言文件中的键，例如：

{
  'Stock': 'Stock english translation',
  'Couleur': 'Is this color?'
}

Answer 3

非常感谢您的回答最后这是我所做的：

    <tr *ngFor="let item_translate of ('PRODUCT.PRODUCT' | translate); let i = index " class="row"
        [ngStyle]="item_translate.critere == 'Stock' && stock<0 ?{color:'red'}:{color:'#474646'}">
        <td class="row">{{item_translate.critere}}</td>
        <td>{{items[i].res}}</td>
      </tr>

在我的 json 示例 fr 中：

"PRODUCT": {
    "PRODUCT": [
      {
        "critere": "Code-modèle"
      },
      {
        "critere": "Code Libellé"
      },
      {
        "critere": "Stock"
      },
      {
        "critere": "Prix TTC"
      },
      {
        "critere": "Couleur"
      },
      {
        "critere": "Matière"
      },
      {
        "critere": "Zone"
      }
    ]
  }