使用Angular

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>