面试题：Angular插值表达式中如何处理复杂对象属性的显示

假设有一个包含多层嵌套属性的JavaScript对象，例如{person: {name: {first: 'John', last: 'Doe'}, age: 30}}，在Angular的插值表达式中，如何正确显示这个人的全名（first + ' ' + last）以及年龄？并解释在插值表达式中访问嵌套属性的原理。

33.7万热度

难度

前端开发Angular

在Angular插值表达式中显示全名和年龄：假设在组件的TypeScript代码中已经将这个对象定义为一个属性，例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app - example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  person = {name: {first: 'John', last: 'Doe'}, age: 30};
}

在对应的HTML模板（example.component.html）中，可以这样使用插值表达式：

<p>全名: {{person.name.first + " " + person.name.last}}</p>
<p>年龄: {{person.age}}</p>

插值表达式中访问嵌套属性的原理：
- 在Angular的插值表达式（{{}}）中，它会按照JavaScript的对象属性访问规则来解析。当遇到person.name.first时，首先从当前组件的上下文（即组件实例）中查找person属性，这个person属性是一个对象。然后在person对象中查找name属性，name属性也是一个对象。最后在name对象中查找first属性，从而获取到对应的值。同样的原理适用于获取last和age属性的值。Angular的插值表达式实际上是对JavaScript对象属性访问语法的一种在模板中的应用，它使得在模板中展示数据变得简洁直观。

星途面试题库

面试题：Angular插值表达式中如何处理复杂对象属性的显示

知识考点

面试题答案