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

Question

I have been searching for hours how I can translate the values of an object array with the module ngx-translate, Here is an extract of my code but I don't know how to implement the json file

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

The object array in the service :

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 },
  ];

I need to translate only the critere column

Thank you

Answer 1

You need to use the TranslatePipe from ngx-translate .

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

Make sure your critere field have the corresponding translations in the json translation files

example for en english translation:

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

Answer 2

As taken from the example in ngx-translate github

You can use the translate pipe in your code, like this:

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

For this to work, your critere would need to be keys in your language file, for example:

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

Answer 3

Thank you very much for your answers Finally here's what I did :

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

In my json example fr :

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