Iterate Tables et étiquettes utilisant ngFor dans Angular

Question

J'essaie de créer plusieurs tables avec plusieurs en-têtes d'étiquettes. Le titre de l'étiquette doit être le nom du projet. Sur chaque project.name, il aura la table material_projects. Dans celui-ci aura l'en-tête de material_name, quantité, unité et total. J'ai l'image de l'exemple ci-dessous sur la façon dont je voudrais y parvenir. J'ai également ajouté la réponse de l'API ci-dessous. Je suis confus sur la façon dont j'utiliserais le * ngFor dans le html.

getAllProjects() { 
    this.subscription = this.projectsService.getAll() 
     .subscribe(
     (data:any) => { 
      this.projects = data.projects; 
      console.log(data); 
     }, 
     error => { 
      console.log(error); 
     }); 
    } 

html

<div class="card-block"> 
    <table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
     <th>Project Name</th> 
     <th>Material ID</th> 
     <th>Unit</th> 
     <th>Quantity</th> 
     <th>Total Quantity</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let project of projects"> 
     <td>{{ project.name }}</td> 
     <td>{{ project.material_projects.material_id}}</td> 
     <td>{{ project.material_projects.unit }}</td> 
     <td>{{ project.material_projects.quantity }}</td> 
     <td>{{ project.material_projects.total }}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Answer 1

Vous pouvez faire quelque chose comme cela,

<div *ngFor="project of projects"> 
    {{project.name}} 
    <table> 
    <th> 
     <td>material_id</td> 
     <td>quantity</td> 
     <td>Unit</td> 
     <td>total</td> 
    </th> 
    <tr *ngFor="innerItem of project.material_projects"> 
     <td>{{innerItem.id}}</td> 
     <td>{{innerItem.quantity}}</td> 
     <td>{{innerItem.unit}}</td> 
     <td>{{innerItem.total}}</td> 
    </tr> 
    </table> 
</div>