Angular 中的条件数据绑定与管道（翻译）变量

Question

嘿 Whosebug / Angular 社区！

我有一个关于组件数据绑定的小问题。我组件上的 [value] 可以有两个不同的 strings/labels 作为值。由于该应用程序知道更多语言，因此我为此使用了翻译管道。代码摘录可能非常不言自明。

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

导致： 未捕获错误：模板解析错误：解析器错误：在需要表达式的地方得到了插值 ({{}})

感觉好像有语法的东西，我漏掉了。尝试了很多不同的组合。当我尝试不带括号的 value 时，我最终得到以 'bool1 ? ...' 开头的整个字符串作为值（这绝对有意义）。

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

提前谢谢大家。

Answer 1

如果您正在使用 ngx-translate，您可以像这样在 .ts 中这样做：

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

并且在你的 ts

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

Answer 2

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

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

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

Answer 3

您可以使用以下方式

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

Conditional data binding in Angular with piped (translate) variables