Реализует загрузочную таблицу с помощью ngFor - Angular - PullRequest
Новая
       5

Реализует загрузочную таблицу с помощью ngFor - Angular

0 голосов
/ 21 июня 2019

Я пытаюсь добавить ngFor данные в таблицу начальной загрузки.

Использование 'table-striped table-dark' из https://getbootstrap.com/docs/4.1/content/tables/

Но я неправильно делаю это в своем html-файле и не могу исправить идентификатор. У меня все даты в одном столбце.

Это мой 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>

Это результат:

enter image description here

1 Ответ

1 голос
/ 21 июня 2019

Тела таблицы имеют определенный синтаксис, вы не можете просто возиться с ним и ожидать, что он будет работать. 

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