Angular 如何在表中嵌套角度形状属性？

我正在使用angular form builder，并尝试在表中创建一个表单。我有一份家长名单，每个家长都有一份孩子名单，每个孩子都需要一张表格

我的表单生成器如下所示：

let parentsModel: any[] = [
    {
        parentName: 'A',
        children: [
            {
                childName: 'AA',
                value: 1
            },
            {
                childName: 'AB',
                value: 2
            }
        ]
    },
    {
        parentName: 'B',
        children: [
            {
                childName: 'BA',
                value: 3
            }
        ]
    }
]

this.form = this.formBuilder.group({
    parents: this.formBuilder.array(
        parentsModel.map(parent => this.formBuilder.group({
            parentName: [parent.ParentName],
            children: parent.children.map(child => this.formBuilder.group({
                childName: [child.childName],
                value: [child.value, [Validators.required]],
            }))
        }))
    )
});

问题是我不确定如何在带有表单控件的表中显示它，因为“正常”方式是嵌套div，例如：

<form [formGroup]="form">
    <div formArrayName="parents">
        <div *ngFor="let parent of parentsModel; let pIndex=index">
            <div [formGroupName]="pIndex">
                <div formArrayName="children">
                    <div *ngFor="let children of parent.children; let cIndex=index">
                        <div [formGroupName]="cIndex">
                            <!--form controls here-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

我的表当前看起来是这样的（没有引用表单），因此无法以这种方式嵌套元素，因为您无法在元素内嵌套元素或任何其他元素

<table class="table table-sm">
    <thead class="thead-light">
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Summary</th>
            <td>0</td>
        </tr>
        <ng-template ngFor let-parent [ngForOf]="parentsModel">
            <tr>
                <th scope="rowgroup" colspan="2">{{parent.parentName}}</th>
            </tr>
            <ng-template ngFor let-child [ngForOf]="parent.children">
                <tr>
                    <td>{{child.childName}}</td>
                    <td>{{child.value}}</td>
                </tr>
            </ng-template>
        </ng-template>
    </tbody>
</table>

名称
价值
总结
0
{{parent.parentName}
{{child.childName}
{{child.value}

---

我想知道如何使用ng模板，但是它似乎只能用于结构指令，有没有其他方法可以做到这一点？

不必使用“div”，如果不想创建其他html标记，可以使用ng容器，甚至可以使用“td”或“tr”代替“div”@Eliseo我以为ng容器也只能用于结构指令？我也不知道你能不能嵌套“tr”或“td”@eling容器似乎能工作