面试题：Angular插值表达式在复杂对象嵌套情况下的应用技巧

Question

假设有一个复杂的JavaScript对象，例如包含多级嵌套的数组和对象，如{ 'outer': [ { 'inner': { 'value': 'example' } } ] } 。在Angular模板中，如何通过插值表达式正确获取并显示 'example' 这个值？如果需要在获取值的过程中进行一些简单的字符串处理（如首字母大写），该如何实现？

Answer 1

1. 获取值： 假设该复杂对象绑定到组件的一个属性，比如myObject，在Angular模板中可以这样获取example值：

   {{myObject.outer[0].inner.value}}
   

2. 获取值并进行首字母大写处理：
   • 可以在组件类中定义一个方法来处理字符串：

   export class MyComponent {
       myObject = { 'outer': [ { 'inner': { 'value': 'example' } } ] };
       capitalizeFirstLetter(str: string): string {
           return str.charAt(0).toUpperCase() + str.slice(1);
       }
   }
   

   • 然后在模板中调用这个方法：

   {{capitalizeFirstLetter(myObject.outer[0].inner.value)}}