如何创建一个嵌套的递归表，以向下钻取Angular中的x个级别？

<table>
  <ng-container *ngFor="let item of data">
    <tr>
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
    <ng-container *ngIf="item.children && item.children.length > 0">
      <tr>
        <td colspan="2">
          <app-recursive-table [data]="item.children"></app-recursive-table>
        </td>
      </tr>
    </ng-container>
  </ng-container>
</table>

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

@Component({
  selector: 'app-recursive-table',
  templateUrl: './recursive-table.component.html',
  styleUrls: ['./recursive-table.component.css']
})
export class RecursiveTableComponent {
  @Input() data: any[];
}

<app-recursive-table [data]="nestedData"></app-recursive-table>

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent {
  nestedData = [
    {
      name: 'Item 1',
      value: 'Value 1',
      children: [
        {
          name: 'Item 1.1',
          value: 'Value 1.1',
          children: [
            {
              name: 'Item 1.1.1',
              value: 'Value 1.1.1',
              children: []
            }
          ]
        },
        {
          name: 'Item 1.2',
          value: 'Value 1.2',
          children: []
        }
      ]
    },
    {
      name: 'Item 2',
      value: 'Value 2',
      children: []
    }
  ];
}