在Angular中使用ngFor迭代表格和標籤

Question

我試圖用幾個標籤標題製作幾個表格。標籤標題應該是project.name。在每個project.name上，它將具有表material_projects。其中它將具有material_name，數量，單位和總計的標題。我有下面的示例圖片，我將如何實現這一目標。我還在下面添加了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>