如何在父组件html表中显示子组件自定义显示元素

Question

我有一个html表，其中显示了先前保存状态下的所有数据。我有一个称为“选项网格”的主要组件，其中每个标签可以有多个选项（选项=列，标签=行）。标签是静态定义的，但是每个后续选项中的数据因选项而异。

我有一个要在网格中显示带有自定义html元素的组件，但是当我在表内对该组件使用选择器标记时，该组件的显示全部被强制放入一个单元格中。我希望插入的组件中的内容与父组件（options-grid）的显示匹配。

以下是主表所在的选项网格：

<table>
    <tbody *ngFor="let section of template?.type[1].option[0].sections; let i = index">
            <tr *ngFor="let label of section.labels"
                id="row-tag">
                <td *ngIf="(label.label != 'Expense')">
                    {{label.label}}
                </td>
                <td *ngFor="let option of this.service.c.options; let x = index">
                    <div *ngIf="i == 0">
                        <f [label]="label.label"
                                [code]="label.code"
                                [num]="x">
                        </f>
                    </div>
                    <div *ngIf="i == 1">
                        <f [label]="label.label"
                                [description]="label.description"
                                [num]="x"
                                [type]="label.type">
                        </f>
                    </div>
                </td>
            </tr>
    </tbody>
    <tbody>
            **<i-f [label]="label"></i-f>**
    </tbody>
</table>

这是带有表数据子集的i-f组件

<tr id="row-tag">
    <td>
        {{label}}
    </td>
    <td *ngFor="let option of this.service.c.options">
        <div class="col-sm-12">
            <div *ngIf="fModel">
                {{ range }}
            </div>
            <div class="input-group">
                <input type="number"/>
                <div class="input-group-addon">%</div>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div>
            <app-ex (exSaveButtonClick)="toggleAndBindEx($event)"
                    [modExModalValues]="modExModalValues">
            </app-ex>
        </div>
    </td>
    <td *ngFor="let option of this.service.c.options">
        <div class="col-sm-12">
            <div *ngIf="fModel">
                {{ exRange }}
            </div>
            <div class="input-group input-group-sm">
                <input type="number"/>
                <div class="input-group-addon">%</div>
            </div>
        </div>
    </td>
</tr>