如何在 Angular 中垂直排列表格标题

Question

我有一个Projects表，显示两列，每个Project一行。 我想将Projects显示为两行，每个Project一列。

当前的

Project ID | Project Name | 
-------------------------
value1.1   |   value1.2   |
value2.1   |   value2.2   |
...
valueN.1   |   valueN.2   |

期望的

Project ID   | value1.1 | value2.1 | ... | valueN.1
Project Name | value1.2 | value2.2 | ... | valueN.2

组件.html.ts

<div class="card my-5">
  <div class="card-body">
    <table class="table table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Project ID</th>
          <th scope="col">Project Name</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let project of project_list">
          <td>{{ project.id }}</td>
          <td>
            <a [routerLink]="['/admin-pd/', project.id]">
                {{ project.projectname }}
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

要创建具有 N 个列的表，必须为每个属性迭代 Projects 数组。 在您的情况下，有六个属性：项目 ID、项目名称、状态、任务、错误和部门。

<div class="card my-5">
  <div class="card-body">
    <table class="table table-bordered table-striped">
      <tbody>

        <tr>
          <th>Project ID</th>
          <td *ngFor="let project of project_list">{{ project.id }}</td>
        </tr>

        <tr>
          <th>Project Name</th>
          <td *ngFor="let project of project_list">
            <a [routerLink]="['/admin-pd/', project.id]">
              {{ project.projectname }}
            </a>
          </td>
        </tr>

        <tr>
          <th>Project Status</th>
          <td *ngFor="let project of project_list">{{ project.projectstatus }}</td>
        </tr>

        <tr>
          <th>Task Associated</th>
          <td *ngFor="let project of project_list">{{ project.TaskAssociated }}</td>
        </tr>

        <tr>
          <th>Bug Associated</th>
          <td *ngFor="let project of project_list">{{ project.BugAssociated }}</td>
        </tr>

        <tr>
          <th>Department</th>
          <td *ngFor="let project of project_list">{{ project.Department }}</td>
        </tr>

      </tbody>
    </table>
  </div>
</div>