Implémentation des balises HTML th et td pour les en-têtes et valeurs de colonnes dynamiques à l'aide de boucles imbriquées ngFor

Question

J'essaie de créer un tableau HTML avec tr et td dynamiques. J'ai ajouté une boucle imbriquée dans le HTML et les en-têtes de colonnes dynamiques (th) fonctionnent correctement mais les valeurs ne sont pas ajoutées au bon td.

这是我拥有的数据：

"finalResult": [
        {
            "tableNamee": "Table_1",
            "colCatégories": [
                {
                    "colonnennnn": "Utilisateur",
                    "valeurs" : [
                        {
                            "valeur": "0"
                        },
                        {
                            "valeur": "10"
                        },
                        {
                            "valeur": "60"
                        },
                        {
                            "valeur": "0"
                        },
                        {
                            "valeur": "0"
                        },
                        {
                            "valeur": "0"
                        },
                        {
                            "valeur": "0"
                        },
                        {
                            "valeur": "0"
                        },
                        {
                            "valeur": "0"
                        }
                    ]
                },
                {
                    "colonnennnn": "En-tête1",
                    "valeurs" : [
                        {
                            "valeur": "460"
                        }
                    ]
                },
                {
                    "colonnennnn": "Montant",
                    "valeurs" : [
                        {
                            "valeur": "10"
                        },
                        {
                            "valeur": "100"
                        },
                        {
                            "valeur": "50"
                        }
                    ]
                }
            ]
        },
        {
            "tableNamee": "Table_2",
            "colCatégories": [
                {
                    "colonnennnn": "Utilisateur",
                    "valeurs" : [
                        {
                            "valeur": "07"
                        },
                        {
                            "valeur": "10"
                        }
                    ]
                },
                {
                    "colonnennnn": "Montant",
                    "valeurs" : [
                        {
                            "valeur": "70"
                        }
                    ]
                },
                {
                    "colonnennnn": "Utilisateur1",
                    "valeurs" : [
                        {
                            "valeur": "57"
                        }
                    ]
                },
                {
                    "columnnnn": "Colonne",
                    "valeurs" : [
                        {
                            "valeur": "80"
                        }
                    ]
                },
                {
                    "colonnennnn": "Colonne2",
                    "valeurs" : [
                        {
                            "valeur": "10"
                        }
                    ]
                }
            ]
        }
    ]≪/pré>
<p>以下是HTML代码：</p>
<pre class="brush:php;toolbar:false;"><div *ngFor="let j de finalResult; index comme je" classe="">
    <classe div=""> <span title="{{j.tableNamee}}">Nom de la table : {{j.tableNamee}} </span>
    </div>
    
    <classe div="">
        <table class="table bordée de table">
            <corps>
                <tr class="">
                    <ième classe="" scope="col" *ngFor="laisser k de j.colCategories">
                        {{k.columnnnn}}
                    ≪/th>
                ≪/tr>
                <ng-container *ngFor="laissez k de j.colCategories">
                    <tr class="">
                        <ng-conteneur>
                            <div *ngFor="laissez m de k.values">
                                <classe td="">
                                    <classe div=""> <span title="{{m.value}}"> {{m.value}} </span>
                                    </div>
                                </td>
                            </div>
                        </ng-conteneur>
                    ≪/tr>
                </ng-conteneur>
            </tcorps>
    
        </tableau>
    </div>
    </div>

什么吗？

这是期望的输出： 期望的输出

这是我得到的当前输出： 当前输出

任何帮助将不胜感激！

Answer 1

Votre balisage HTML semble bizarre à cause de votre <tr>包含一个包裹<td>的<div>. Je pense que c'est ce qui cause votre problème.

Je ne l'ai pas essayé, mais vous pouvez essayer de changer votre tag <table> comme suit :

<table class="table table-bordered">
        <thead>
            <tr class="">
                <th class="" scope="col" *ngFor="let k of j.colCategories">
                    {{k.columnnnn}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="" *ngFor="let k of j.colCategories">
                <td class="" *ngFor="let m of k.values">
                    <div class="">
                        <span title="{{m.value}}"> {{m.value}} </span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>