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