Javascript Angular2:读取具有未知键的对象

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

这里有一个例子：

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”（读取我）？

绑定到“getter”，而不是直接绑定到数组或对象

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

控制器中的其他逻辑也可以帮助确定“正确值”是什么，例如，从服务中获取对象，当对象返回时，进行测试并将“正确值”设置为所需的值。setter可以很好地做到这一点：

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

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

绑定到“getter”，而不是直接绑定到数组或对象

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

控制器中的其他逻辑也可以帮助确定“正确值”是什么，例如，从服务中获取对象，当对象返回时，进行测试并将“正确值”设置为所需的值。setter可以很好地做到这一点：

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

---

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

您可以使用

reduce

功能获取值。您不能在模板中定义函数，因此逻辑必须存在于组件中

模板 组成部分

---

您可以使用

reduce

功能获取该值。您不能在模板中定义函数，因此逻辑必须存在于组件中

模板 组成部分

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