Question

我想在模板中显示不同对象的特定值。要显示的值的路径取决于对象。

这是一个例子：

let obj = {
    "a": "a",
    "b": {
       "1": "1",
       "2": "READ ME"
    }
}

let obj2 = {
    "x": "x",
    "y": {
       "foo": "1",
       "bar": {
           "test": "READ ME"
       }
    }
}

在这个例子中，我想为第一个对象读取值“READ ME”，如obj.b.2或obj['b']['2']。但是我不知道READ ME值在哪里取决于对象。

要知道要显示的值的位置，我向我的tempate传递一个配置数组，其中包含要调用的键列表：像这样：

config = ['b', '2'] // For the first object
config = ['y', 'bar', 'test'] // For the second object

如何使用我的密钥列表在模板中显示“READ ME”？

Answer 1

您可以使用reduce函数获取值。您无法在模板中定义函数，因此逻辑必须存在于组件中。

模板

{{config.reduce(reduceValue, obj)}}

组件

public reduceValue(object, prop){
    return object ? object[prop] : null;
}

Demo

Answer 2

绑定到＆＃34; getter＆＃34;而不是直接到数组或对象。

<div>{{ getTheRightValue ( ) }}</div>

在您的控制器中：

get theRightValue ( ) {
   // Test objects, determine correct value...
   return theCorrectValue;
}

控制器中的其他逻辑可以帮助确定＆＃34; theCorrectValue＆＃34;也就是说，例如，你从服务中获取对象，当他们返回时，进行测试并设置＆＃34; theCorrectValue＆＃34;无论你需要什么。 setter可以做得很好：

set theRightValue ( ) {
  // do your logic, etc...
  theCorrectValue = etc. etc.
}

通过这种方式，您可以绑定来自完全不同结构的结果。你只需要检查它们，设置你需要的东西，然后从getter返回。

Angular2：使用未知密钥读取对象

2 个答案:

模板

组件

Demo