使用 ngFor - Angular 实现 bootstrap table

Question

我正在尝试在 bootstrap table.

中添加 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

Table body 有特定的语法，你不能乱用它并期望它能工作。

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

使用 ngFor - Angular 实现 bootstrap table

Implements bootstrap table with ngFor - Angular

html

angular

tabs

ngfor