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

Question

我正在尝试制作几个带有多个标签标题的 table。标签标题应为 project.name。在每个 project.name 上，它将有 table 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>

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

Iterate Tables and Labels Using ngFor in Angular

angular

html-table

angular-template

angular-forms

angular-ng