如何在翻译中使用 ng2-completer答案

【问题标题】：How to use ng2-completer with translate如何在翻译中使用 ng2-completer
【发布时间】：2018-09-28 23:41:12
【问题描述】：

我是 Angular 新手，我尝试将模块 ng2-completer 与 TranslateModule 一起使用。

问题是当我从服务器端检索 JSON 时，JSON 是：

[{"id":10,"tipo":"EUR"},{"id":20,"tipo":"USD"}]

我想使用 tipo 作为标签中的值

<ng2-completer #openCloseSelect
            class="completer-limit"
            [datasource]="dataService4"
            [inputClass]="'form-control'"
            [minSearchLength]="0"
            [openOnFocus]="false"
            [placeholder]="'SCEGLI' | translate"
            [autoHighlight]="true"
            [selectOnClick]="true"
            [fillHighlighted]="false">
 </ng2-completer>

其中“dataService4”在构造函数中被初始化为

this.dataService4 = completerService.local(this.diviseAzioni, "tipo", "tipo"); //diviseAzioni 是对象列表 class DivisaAzioni { 身份证号码; tipo: string;}（来自服务器端的 JSON）

并使用angular的TranslateModule来翻译tipo的值。

例如EUR: "Euro", USD: "US Dollars" 作为选择的 textLabel。

谢谢。

【问题讨论】：

标签： angular angular-translate ng2-completer

【解决方案1】：

这方面的挑战是您需要与实际数据值不同的显示值（如果我对您的问题的解释正确的话）。

查看 ng2-completer 的文档，我看不到这样做的方法。您的选择似乎是：

1) 通过修改 ng2-completer 源代码来破解一个解决方案（不推荐）

2) 重写你的服务如下：当数据来自它调用的任何 API 时，立即使用翻译模块对其进行翻译，并且只公开翻译后的值。每当您使用服务保存或发送值时，请翻译回源文本。您可以使用本地地图加快此过程，这样您就不必为反向翻译进行网络调用。

3) 使用 mat-autocomplete。你可以只包含你需要的组件，尽管它仍然很重。然而，它有这样的功能：https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

【讨论】：