以下是使用Angular2和Typescript将一个对象添加到一个对象数组的对象数组的对象的示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
-
{{ obj.name }}
-
{{ subObj.name }}
`,
})
export class AppComponent {
objectArray: any[] = [{
name: 'Object 1',
subObjects: [{
name: 'Sub Object 1'
}, {
name: 'Sub Object 2'
}]
}];
addObject() {
const newObject = {
name: 'Object 2',
subObjects: [{
name: 'Sub Object 3'
}, {
name: 'Sub Object 4'
}]
};
this.objectArray.push(newObject);
}
}
在上面的代码中,我们有一个objectArray
数组,其中包含一个对象,该对象具有name
属性和subObjects
数组。 subObjects
数组中的每个对象都有一个name
属性。
通过点击“Add Object”按钮,我们可以将新对象添加到objectArray
数组中。新对象具有与现有对象相同的结构,并包含不同的名称。
在模板中,我们使用*ngFor
指令来循环遍历objectArray
数组中的每个对象,并显示其名称。对于每个对象,我们还使用*ngFor
指令循环遍历其subObjects
数组,并显示其名称。
当单击“Add Object”按钮时,addObject()
方法将一个新对象添加到objectArray
数组中。这将触发Angular的变更检测,导致模板中的循环结构自动更新,以反映新添加的对象。