angular2 elvis 运算符和括号表示法/按键访问对象答案

【问题标题】：angular2 elvis operator and bracket notation / object access by keyangular2 elvis 运算符和括号表示法/按键访问对象
【发布时间】：2015-12-21 18:02:01
【问题描述】：

所以，假设我们有一个简单的对象，它包含两个不同语言的字符串，例如
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]
..

这只是要走的路，还是有办法按照我想要的方式使用猫王操作员？
非常感谢您的任何回答！

【问题讨论】：

标签： key angular square-bracket

【解决方案1】：

我实际上最终使用了自定义的“安全导航”管道，因为在我的案例中，空检查和方括号链变得很长，并且 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  }}

其中数组项可以是动态值。

【讨论】：

【解决方案2】：

我也遇到了同样的问题，而猫王呢？。此线程中引入了运算符：https://github.com/angular/angular/issues/791 现在已关闭，@lgalfaso 建议将其扩展为包括 ?[ 和 ?(

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

你可以这样做：

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

所以基本上你是在说“给我welcomeText 或空对象”——这总是会返回一个对象。然后你可以获取任何属性。

【讨论】：

【解决方案5】：

你可以像welcomeText?.[language]一样使用它

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

我感觉你在这里尝试做的事情实际上是不可能的，template syntax 页面上肯定没有任何内容。

对于它的价值，我认为您提出的解决方案实际上没有任何问题，这可能是我自己解决这个问题的方法。

编辑：另外值得注意的是，Angular 2 的 I18n 和 L10n 功能还没有实现，我会继续关注这个功能来解决问题

【讨论】：