Невозможно выровнять заголовок таблицы и тело таблицы в формате html, используя угловые с данными в памяти

Question

Не получается совместить заголовок таблицы с телом таблицы.

Это для моего проекта по созданию базы данных хранения данных студента веб-типа.

    <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">Id</th>
                    <th scope="col">NIM</th>
                    <th scope="col">Nama</th>
                    <th scope="col">Jenis Kelamin</th>
                    <th scope="col">Alamat</th>
                    <th scope="col">Nama Bapak</th>
                    <th scope="col">Nama Ibu</th>
                    <th scope="col">Jurusan</th>
                    <th scope="col">Prodi</th>
                    <th scope="col">IPK Terakhir</th>
                    <th scope="col">Hapus</th>
                  </tr>
                </thead>
                <tbody *ngFor="let mhs of mhss">
                  <a routerLink="/detail/{{mhs.id}}">
                    <tr>
                          <td>{{mhs.id}}</td>
                          <td>{{mhs.nim}}</td>
                          <td>{{mhs.name}}</td>
                          <td>{{mhs.jk}}</td>
                          <td>{{mhs.alamat}}</td>
                          <td>{{mhs.nama_bapak}}</td>
                          <td>{{mhs.nama_ibu}}</td>
                          <td>{{mhs.jurusan}}</td>
                          <td>{{mhs.prodi}}</td>
                          <td>{{mhs.ipk}}</td>
                          <td><button class="delete" title="delete mhs"
                          (click)="delete(mhs)">HAPUS</button></td>
                    </tr>
                  </a>
                </tbody>
              </table>

Мойизображение:

Answer 1

Ваш код генерирует новый <tbody> для каждого элемента в вашем массиве.Добавьте структурную директиву *ngfor к строкам таблицы (<tr>).