Question

所以，假设我们有一个简单的对象，它包含两种不同语言的字符串，如
welcomeText = {"de": "Willkommen zurück!", "en": "Welcome back!"}。

welcomeText是Texts对象的属性，它包含所有文本并以异步方式传递（所以我需要处理可能的未定义值，因此elvis运算符）。现在，在我的angular2模板中，我想根据当前选择的语言显示文本这是有效的（但不是我需要的）：

..
{{Texts?.welcomeText?.de}}   // works, as well as {{Texts?.welcomeText?.en}}
..

我想要的是这个（因为语言可以改变）：

..
{{Texts.?welcomeText?[language]}}
..

不幸的是，这会导致错误：

EXCEPTION: Template parse errors:
Parser Error: Conditional expression 
      {{Texts?.welcomeText?[language]}}
     requires all 3 expressions at the end of the expression ..

不知道如何修复此错误。我只是不确定我是否使用它错了，或者它是不是打算像那样工作。目前我使用一个简单的解决方法，但我发现它有点难看，因为我有一个方法调用到处想要显示文本：

..
{{getText('welcomeText')}} 
..
..
getText(name : string){
 if(this.Texts)
   return this.Texts[name][this.language]
..

这只是前进的方式，还是有办法按照我想要的方式使用elvis操作员进行操作？
非常感谢您的回答！

Answer 1

我实际上最终使用了自定义＆＃39;安全导航＆＃39;在我的情况下，无效检查和方括号链变得很长，而Angular的?.运算符不适合[]约束。

import { Pipe } from '@angular/core';
import { path } from 'ramda';

@Pipe({name: 'safe'})
export class SafeNavigationPipe {
    transform(propertyPath: any[], source: any) {
        return path(propertyPath, source);
    }
}

path function执行所有工作的地方 - 在给定路径下检索数据，并在路径无法解析后立即返回undefined。

可以像这样使用：

{{ [userId, dayIdx, shiftIdx, 'status'] | safe:usersList  }}

数组项可以是动态值。

Answer 2

我认为针对您的情况更简单的解决方案是使用三元运算符，如下所示：

{{ Texts && Texts.welcomeText ? Texts.welcomeText[language] : '' }}

您可以测试它到所需值的路径，而不必调用函数来执行此操作。

Answer 3

您可以执行以下操作：

{{(Texts.?welcomeText || {})[language]}}

因此，基本上，您说的是“让我welcomeText或空对象”-这将始终返回一个对象。然后，您可以获取任何属性。

Answer 4

你可以像welcomeText?.[language]

一样使用它

{{ Texts?.welcomeText?.[language] }}

Answer 5

Angular 12.1.0-next.5 (commit) 包括对安全键控读取表达式的支持，因此从这个版本开始，我们可以像处理非动态属性/方法一样正常使用它：

{{ Texts?.welcomeText?.[language] }}

Answer 6

我有一种感觉，你在这里尝试做的事情实际上并不可能在template syntax页面上确实存在。

为什么它的价值我不认为你提出的解决方案有什么问题，这可能是我自己解决这个问题的方法。< / p>

编辑：还值得注意的是Angular 2的I18n和L10n功能还没有实现，我一直在关注此功能的解决方案问题

Answer 7

我遇到了同样的问题，而猫王呢？运算符是在这个帖子中引入的：https://github.com/angular/angular/issues/791它现在已经关闭了，@ lgalfaso建议将它扩展为包含？[和？（

在我的书中，它应该支持这一点，主要是因为解决方法是一件单调乏味的事情。

angular2 elvis操作符和括号符号/按键访问对象

7 个答案: