table html vient offset; probablement dû à * ngFor - html, angular, typescript

J'essaie d'aligner correctement le tableau html maisça se détache. Le défi que j'ai est par rapport à la boucle interne (modification) qui est une liste à l'intérieur de la révision (autrement dit la révision "a une" liste de modification.

Bien que le résultat à l'écran soit correct, le tableau est complètement éteint. Je suppose que le problème est dans la boucle 2 * ngFor. Un pointeur?

        <table class="table table-striped">
<thead>
<tr>
<th>Revision No</th>
<th>Date</th>
<th>Username</th>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
<tr>
<div *ngFor="let r of revisions">
<div *ngFor="let m of r.modifications">

<td>{{r.revision}}</a></td>
<td>{{r.date}}</td>
<td>{{r.username}}</td>
<td>{{m.forItem}}<td>
<td>{{m.oldInfo}}<td>
<td>{{m.newInfo}}</td>
</div>
</div>
</tr>
</tbody>
</table>

Réponses:

Rien ne peut aller entre votre tr et td. Mettez le premier ngfor dans un tbody enroulé autour de votre tr. Ensuite, mettez votre deuxième ngfor sur le tr

Vous ne pouvez pas avoir un <div> à cette position à l'intérieur d'une table

Utilisation

<ng-container *ngFor="let r of revisions">

au lieu de

<div *ngFor="let r of revisions">