要在Angular 7中创建一个递归对象表格行,可以使用递归组件的概念。以下是一个解决方案的代码示例:
recursive-table-row
的递归组件:recursive-table-row.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'recursive-table-row',
templateUrl: './recursive-table-row.component.html',
styleUrls: ['./recursive-table-row.component.css']
})
export class RecursiveTableRowComponent {
@Input() rowData: any;
@Input() columns: string[];
hasChildren(): boolean {
return this.rowData.children && this.rowData.children.length > 0;
}
}
recursive-table-row.component.html:
{{rowData[column]}}
parent.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
data = [
{ name: 'John', age: 30, children: [
{ name: 'Alice', age: 5, children: [] },
{ name: 'Bob', age: 10, children: [
{ name: 'Charlie', age: 3, children: [] },
{ name: 'David', age: 7, children: [] }
] }
] },
{ name: 'Mary', age: 25, children: [] }
];
columns = ['name', 'age'];
}
parent.component.html:
{{column}}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RecursiveTableRowComponent } from './recursive-table-row/recursive-table-row.component';
import { ParentComponent } from './parent/parent.component';
@NgModule({
declarations: [
AppComponent,
RecursiveTableRowComponent,
ParentComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,当你在父组件中使用
标签时,就会生成一个递归的对象表格。