在Angular中,可以使用双向数据绑定和表单控件来实现在同一个表单中将一个对象添加到另一个对象。以下是一个例子:
在组件的HTML模板中,创建一个表单,并使用ngModel指令将表单控件与组件的属性进行绑定:
{{person.name}}
{{person.age}}
在组件的.ts文件中,定义两个对象:newPerson和people,并在addPerson()方法中将newPerson对象添加到people数组中:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
newPerson: { name: string, age: number } = { name: '', age: 0 };
people: { name: string, age: number }[] = [];
addPerson() {
this.people.push(this.newPerson);
this.newPerson = { name: '', age: 0 };
}
}
在这个例子中,我们创建了一个表单,其中包含两个输入字段:姓名和年龄。ngModel指令将这两个输入字段与组件中的newPerson属性进行双向绑定。当用户点击“添加”按钮时,addPerson()方法将newPerson对象添加到people数组中,并将newPerson对象重置为空对象。
最后,我们使用ngFor指令在HTML模板中循环遍历people数组,并显示每个人的姓名和年龄。