角度高级表达绑定

Question

我想将表达式绑定到按钮文本，以检查是否启用了编辑模式，并基于此选择要翻译和显示的字符串。这是我的尝试：

<button ion-button block outline color="primary" type="submit" >{{editMode ?  "'EDIT_USER' | translate"  :  "'ADD_USER' | translate" }}</button>

这是按钮的输出文本-不会翻译和显示字符串，但会显示文字值：

'ADD_USER'|翻译

有什么办法不显示文字值，而是将其转换为字符串然后在按钮上显示？

Answer 1

将值和管道括在括号中

{{editMode ?  ('EDIT_USER' | translate) : ('ADD_USER' | translate)}}

或者，您可以先应用三元运算符，然后在结果上应用管道：

{{(editMode ?  'EDIT_USER' : 'ADD_USER') | translate}}

Answer 2

除了DarthJDG的回答外，我还要补充一下为什么它不起作用。 在您的代码中：

{{editMode ?  "'EDIT_USER' | translate"  :  "'ADD_USER' | translate" }}

评估ternery值，然后证明editMode为真Angular将值"'EDIT_USER' | translate"视为字符串，而不和表达式。

因此，在您的代码中显示了文字字符串输出。

正如DarthJDG所说的那样，可以解决以下问题：

{{editMode ?  ('EDIT_USER' | translate) : ('ADD_USER' | translate)}}

这是因为现在Angular首先应用了传输管道，因为括号的优先级最高。然后，在执行翻译管道之后，将对三元表达式求值并显示相应的输出。

希望这可以帮助您更深入地了解自己的错误。

Answer 3

我认为表达式应该像：

{{(editMode ? 'EDIT_USER' : 'ADD_USER') | translate}}