使用 ngFor 实现引导表 - Angular

Question

我正在尝试在引导表中添加ngFor数据。

使用https://getbootstrap.com/docs/4.1/content/tables/中的“table-striped table-dark”

但我在 html 文件中做错了，无法修复 id。我将所有日期都放在一栏中。

这是我的 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>

这是结果：

Answer 1

表体有特定的语法，你不能只是乱搞它并期望它能够工作。

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