使用ngFor实现引导表-Angular

Question

I'm trying to add ngFor data in bootstrap table.

Using 'table-striped table-dark' from https://getbootstrap.com/docs/4.1/content/tables/

But I doing it wrong in my html file, and can't fixed id. I have all date in one column.

This is my HTML:

<div class="users-container">

  <div class="d-md-flex h-md-100 align-items-center">

    <div class="col-md-6 ">
      <div class="d-md-flex align-items-center text-center justify-content-center">
        <div class="logoarea pt-5 pb-5">
          <h2>All registered users</h2>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>

  <h3 *ngIf="!users.length">There are no users registered!</h3>

  <table class="table table-striped table-dark">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Create on</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <hr *ngIf="users.length">
        <div class="all-users" *ngFor="let users of users">
          <th scope="row">{{users.id}}</th>
          <td>{{users.name}}</td>
          <td>{{users.email}}</td>
          <td></td>
        </div>
      </tr>
    </tbody>
  </table>

  <!-- <hr *ngIf="users.length">
  <div class="all-users" *ngFor="let users of users">
    {{users.name}}
  </div> -->
</div>

This is the result:

Answer 1

Table bodies have a specific syntax, you can't just mess around with it and expect it to work.

<tr *ngFor="let users of users">
  <th scope="row">{{users.id}}</th>
  <td>{{users.name}}</td>
  <td>{{users.email}}</td>
  <td></td>
</tr>