ngForを使ってテーブルとラベルを反復する

Question

私はいくつかのテーブルをいくつかのラベルの見出しで作ろうとしています。ラベル見出しはproject.nameでなければなりません。各project.nameには、material_projectsテーブルがあります。それにはmaterial_name、quantity、unit、およびtotalの見出しがあります。私はどのようにこれを達成したいと思うかの下の例の画像を持っています。また、以下のAPIレスポンスを追加しました。私はhtmlで* ngForを使ってどのように反復するのか混乱しています。あなたはこのような何かを行うことができ

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

、

<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>