在Angular中使用ngFor迭代表和标签

Question

我正在尝试用几个标签标题制作几个表。 标签标题应为project.name。 在每个project.name上，都有表material_projects。 其中将包含物料名称，数量，单位和总计的标题。 我有下面的示例图片，我想如何实现这一目标。 我还在下面添加了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>