在Angular中,可以使用外键数组来实现类中包含外键数组的功能。下面是一个示例解决方法:
首先,创建一个包含外键数组的类:
export class Parent {
id: number;
name: string;
childIds: number[]; // 外键数组
constructor(id: number, name: string, childIds: number[]) {
this.id = id;
this.name = name;
this.childIds = childIds;
}
}
接下来,创建一个父组件,用于展示和操作外键数组:
import { Component } from '@angular/core';
import { Parent } from './parent';
@Component({
selector: 'app-parent',
template: `
Parent Component
{{ parent.name }}
- {{ getChildName(childId) }}
`
})
export class ParentComponent {
parents: Parent[] = [
new Parent(1, 'Parent 1', [1, 2, 3]),
new Parent(2, 'Parent 2', [4, 5])
];
childNames: { [id: number]: string } = {
1: 'Child 1',
2: 'Child 2',
3: 'Child 3',
4: 'Child 4',
5: 'Child 5'
};
addChild(parent: Parent) {
const childId = Math.floor(Math.random() * 100); // 生成随机的子项ID
parent.childIds.push(childId); // 将子项ID添加到外键数组中
}
getChildName(childId: number): string {
return this.childNames[childId];
}
}
在父组件中,通过ngFor指令循环遍历父对象数组,并使用ngFor指令再次循环遍历每个父对象的子项ID数组。在子项ID数组的循环中,通过getChildName方法获取子项的名称。
最后,将父组件添加到应用的模块中:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, ParentComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,就可以在页面上展示父对象及其对应的子项,并且可以点击按钮添加新的子项到外键数组中。