如何根据语言更改 InputTextbox 标签？答案

【问题标题】：How to change InputTextbox label according to language?如何根据语言更改 InputTextbox 标签？
【发布时间】：2019-08-08 10:19:31
【问题描述】：

我正在使用角度动态表单来创建表单。我创建了一个只有一个带有动态表单的文本框的表单。除了一个之外，一切都运行良好。我想根据所选语言更改文本框标签。我的文本框标签在我的项目中是多语言的，但我无法将此多语言属性分配给文本框。

这是我创建文本框的代码。在这种情况下，标签值必须是多语言的。

我正在使用 ngx-translate 库来支持多语言。

tr.json => "title": "Unvanlar"

en.json => "title": "Titles"

    const inputs: InputBase<any>[] = [
      new InputTextbox({
        key: 'dataValue',
        label: '....',
        type: 'text',
        value: '',
        required: true,
        order: 1
      })
    ];

    return inputs.sort((a, b) => a.order - b.order);
  }

根据网站语言，标签值必须是“Unvanlar”或“Titles”。

我该怎么做？你能帮我解决这个问题吗？

【问题讨论】：

标签： angular forms typescript dynamic

【解决方案1】：

import { TranslateService } from '@ngx-translate/core';

constructor(
   private readonly translate: TranslateService
) {}

this.translate.get('title').subscribe((title: string) => {
   const inputs: InputBase<any>[] = [
      new InputTextbox({
         key: 'dataValue',
         label: title,
         type: 'text',
         value: '',
         required: true,
         order: 1
      })
   ];
});

这样的事情应该可以解决问题。

【讨论】：

“不工作”怎么办？得到错误？试试this.translate.get('title').subscribe((s: any) => {console.log(s);}); 看看你会得到什么
this.translate.instant('title') 产生 title 结果。 this.translate.get('title').subscribe((s: any) => {console.log(s);}); 产生预期结果，但我无法直接将此结果分配给标签。我想分配label: this.translate.instant('title')
这意味着设置inputs 时不会加载翻译。我已经编辑了答案。
我正在返回输入以分配给一个变量。您建议的答案有效，但不允许返回这些输入。我需要能够退货。
在这种情况下，您可以使方法异步或确保已加载翻译并使用this.translate.instant()

【解决方案2】：

解决办法如下：

private getInputs(): InputBase<any>[] {
    const inputs: InputBase<any>[] = [];

    const textBox = new InputTextbox({
      key: 'titleName',
      label: '',
      type: 'text',
      value: '',
      required: true,
      order: 1
    });

    this.translateService.get(this.labelKeywords).subscribe(
      res => {
        textBox.label = res[this.labelKeywords[0]];
      }
    );

    inputs.push(textBox);

    return inputs.sort((a, b) => a.order - b.order);
  }

【讨论】：