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

所以,假设我们有一个简单的对象,它包含两种不同语言的字符串
welcomeText = {“de”：“Willkommenzurück！”,“en”：“欢迎回来！”}.

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]
..

这是仅仅是要走的路还是有办法按照我想要的方式,用猫王运算符做到这一点？
非常感谢任何答案！

我实际上最终使用自定义’安全导航’管道,因为在我的情况下,无效检查和方括号链正在逐渐变为长和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  }}

数组项可以是动态值.

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

猜你在找的Angularjs相关文章