如何翻译组件中的单词(.ts) Ngx Translation Angular

Question

I have this array from where I build the headers of a table, but I can't show the title according to the language. I am using ngx translate.

I have this in my html template:

  <thead>
                <tr>
                    <th>#</th>
                    <th *ngFor="let col of columns" class="cursor-pointer" (click)="sort(col.propertyName)">
                        {{col.label}}
                    </th>
                </tr>

            </thead>

I only get [object object]

I have this in my.ts component

columns = [
{ label: 'Nombre', propertyName: 'name' },
{ label: 'Imagen', propertyName: 'image' },
{ label: 'Descripción', propertyName: 'description' },
{ label: 'Categoria', propertyName: 'category' },
{ label: this.translateService.get('form.purchasePrice'), propertyName: 'purchase_price' },
{ label: 'Precio Unitario', propertyName: 'unit_price' },
{ label: 'Acción', propertyName: 'action' }];

Try with translateService get, instant,stream

but I don't get the desired result

Answer 1

For every language you would have a separate file in your Angular applications assets:

• de.json
• en.json
• ...

Each of these translation files contains key-value pairs, ie en.json

{
  "MY_LABEL": "My translation text"
}

and de.json

{
  "MY_LABEL": "Mein Übersetzungstext"
}

In your template you can then use the translate pipe as follows

{{ 'MY_LABEL' | translate }}

and ngx will chose the right translation file according to the language selected.

So your columns array should not contain the translated values. It should only contain the labels. The actual translated values should only appear in your translation file.

your.component.ts

columns = [
  { label: 'YOUR_COMPONENT-NOMBRE', propertyName: 'name' }
]

your.component.html

{{ col.label | translate }}

es.json

{
  'YOUR_COMPONENT-NOMBRE': 'nombre'
}

Following the usage guide you also have to do some configuration in your app module.

Answer 2

You can do one thing for this translation. I assume that you have JSON file for it and you have already added translate module in your current module where you are using. I faced the same issue and this is how I kind of worked on.

In your ts file:

import { TranslateService } from "@ngx-translate/core";
.
.
constructor (private translateService: TranslateService)
.
.
public getTranslationsForTable(columns) {
/// in your columns array do the translation for specific
/// add a property to your col object which check if the label is already translated

this.translateService.get(columns.label).toPromise().then(e => console.log(e)).catch(e => console.error(`Error is thrown ${e}`));
}

What you are doing is calling a get method in object which is a promise and it is not resolved instead try to get the translation first and then add the translation to the columns array.