面试题：Angular属性绑定中如何绑定一个对象的多个属性

Question

假设你有一个包含多个属性的JavaScript对象，如{name: 'John', age: 30, city: 'New York'}，在Angular组件模板中，如何使用属性绑定一次性将这个对象的多个属性绑定到HTML元素上？请给出具体代码示例。

Answer 1

在Angular组件模板中，可以使用[attr.*]语法来实现一次性绑定对象的多个属性到HTML元素上。假设我们有如下组件类：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  person = {name: 'John', age: 30, city: 'New York'};
}

在模板文件example.component.html中，可以这样绑定：

<div 
  [attr.data - name]="person.name" 
  [attr.data - age]="person.age" 
  [attr.data - city]="person.city">
  这是一个示例div
</div>

上述代码中，我们通过[attr.*]语法将person对象的name、age和city属性分别绑定到了div元素的自定义data - *属性上。实际应用中可根据HTML元素支持的属性以及业务需求进行属性绑定。