Angular中带管道翻译变量的条件数据绑定

问题描述

嘿stackoverflow / Angular社区！

我对组件上的数据绑定有一个小疑问。 我组件上的$ PHP -v PHP 7.3.22 (cli) (built: Sep 3 2020 21:17:58) ( NTS ) copyright (c) 1997-2018 The PHP Group Zend Engine v3.3.22,copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.3.22,copyright (c) 1999-2018,by Zend Technologies 可以有两个不同的字符串/标签作为值。由于该应用程序知道更多语言，因此我为此使用了翻译管道。 代码摘录可能非常不言自明。

[value]

通往： 未捕获的错误：模板解析错误： 分析器错误：在需要表达式的地方进行了插值（{{}}）

感觉好像有语法问题，我错过了。尝试了很多不同的组合。当我尝试不带括号的<my-component [value]="bool1 ? {{'GLOBAL.YES' | translate }} : {{'GLOBAL.NO' | translate }}"></my-component> 时，我最终得到的整个字符串都以'bool1？开始。 ...”作为价值（绝对有意义）。

也许有人知道如何解决此问题？

谢谢大家。

解决方法

您不能在属性绑定中进行插值。 您可以使用JFPicard显示的方法。

或者，如果您确实需要在模板中执行此操作，请执行以下操作：

<my-component [value]="(bool1 ? 'GLOBAL.YES' : 'GLOBAL.NO') | translate"></my-component>

,

如果您使用的是ngx-translate，则可以在.ts中执行以下操作：

<my-component [value]="getTranslation(bool1)" />

还有你的ts

  private getTranslation(value: boolean): string {  
    return value ? translate.instant("GLOBAL.YES"): translate.instant("GLOBAL.NO")
  }

,

您可以按以下方式使用

<component [value]="(bool1 ? 'GLOBAL.YES' : 'GLOBAL.NO') | translate"></component>