angular：使用 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 },
  ];

我只需要翻译 critere 列

谢谢

Answer 1

摘自 ngx-translate example github

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

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

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

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

Answer 2

您需要使用 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 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"
      }
    ]
  }

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

angular: Translate elements of an object array in a template with ngx-translate

arrays

ngx-translate

angular