我正在尝试创建一个嵌套表

Question

我需要像这样创建一个嵌套表：

每个主题的月数、主题和参数是可变的，因为我从数据库中获取它们，所以我试图实现它，我想出了这个解决方案：

<div class="col-13">
<form  #login (ngSubmit)="onSubmit()" novalidate>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Figura professionale</th>
                <th>Dipendente</th>
                <th *ngFor="let column of mesi; let k = index">
                    {{column}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of FigProfs;  let i = index"> 
                <td>{{row.nome}}</td>
                <table>
                    <tr *ngFor="let innerrow of Dips[i];  let k = index">
                        <td>{{innerrow.nome}} {{innerrow.cognome}}</td>
                        
                        <td *ngFor="let column of mesi; let j = index">   
                            <input  id="gd{{row.id}}_{{column}}" name = "gd{{row.id}}_{{column}}" type="number" ng-init="get(row.id,column)=0" [ngModel]="get(row.id,j)" (ngModelChange)="set(row.id,innerrow.id,j,$event)"> 
                        </td>    
                    </tr>
                </table> 
            </tr>
        </tbody>
    </table>
    <button class="btnsubmit" type="submit">AVANTI</button>
</form>

返回这个： 如您所见，这不是我所需要的，有没有办法解决它？谢谢

Answer 1

在这里，您将获得您的桌子的蓝图。你可以用你想要的每一个变量来填充它：

<table border="3px">
    <thead>
        <th>topic</th>
        <th>argument</th>
        <th>month1</th>
        <th>month2</th>
        <th>month3</th>
        <th>month4</th>
    </thead>
    <tbody>
        <tr>
            <td>topic 1</td>
            <td>
                <table>
                    <tr>
                        <td>argument 1 of topic 1</td>
                    </tr>
                    <tr>
                        <td>argument 2 of topic 1</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td>month 1 of topic 1</td>
                    </tr>
                    <tr>
                        <td>month 1 of topic 1</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>topic 2</td>
            <td>
                <table>
                    <tr>
                        <td>argument 1 of topic 2</td>
                    </tr>
                    <tr>
                        <td>argument 2 of topic 2</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td>month 1 of topic 2</td>
                    </tr>
                    <tr>
                        <td>month 1 of topic 2</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>