如何翻译组件（.ts）中的单词 Ngx Translation Angular

Question

我从构建 table 的 headers 的地方得到了这个数组，但我无法根据语言显示标题。我正在使用 ngx 翻译。

我的 html 模板中有这个：

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

            </thead>

我只得到[objectobject]

我的 .ts 组件中有这个

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

尝试使用 translateService get, instant,stream

但我没有得到想要的结果

Answer 1

你可以为这个翻译做一件事。我假设您有 JSON 文件，并且您已经在当前使用的模块中添加了翻译模块。我遇到了同样的问题，这就是我的工作方式。

在你的 ts 文件中：

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}`));
}

您正在做的是调用对象中的 get 方法，这是一个承诺，但未解决，而是尝试先获取翻译，然后将翻译添加到列数组中。

Answer 2

对于每种语言，您的 Angular 应用程序资产中都会有一个单独的文件：

de.json
en.json
...

这些翻译文件中的每一个都包含键值对，即。 e. en.json

{
  "MY_LABEL": "My translation text"
}

和de.json

{
  "MY_LABEL": "Mein Übersetzungstext"
}

在您的模板中，您可以按如下方式使用翻译管道

{{ 'MY_LABEL' | translate }}

ngx会根据选择的语言选择正确的翻译文件。

因此您的列数组不应包含翻译后的值。它应该只包含标签。实际翻译值应该只出现在您的翻译文件中。

your.component.ts

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

your.component.html

{{ col.label | translate }}

es.json

{
  'YOUR_COMPONENT-NOMBRE': 'nombre'
}

在 usage guide 之后，您还必须在应用模块中进行一些配置。

如何翻译组件（.ts）中的单词 Ngx Translation Angular

How to translate words in the component(.ts) Ngx Translation Angular

angular

translate

ngx-translate