Как выровнять заголовок таблицы по вертикали в Angular

Question

У меня есть таблица Проекты , отображающая два столбца и по одной строке на Проект . Я хочу отобразить Проекты в виде двух строк и одного столбца на Проект .

Текущий

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

component.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>