角度：使用 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"
      }
    ]
  }