форматирование таблицы

Question

Я пытаюсь отформатировать таблицу в Angular.У меня есть БД с именем, фамилией, городом, страной.Я пытаюсь отобразить данные в табличном формате.Вот мой код:

<table border="1" style="width:70%">
  <tr bgcolor="lightblue">
    <th style="width:20%">Last Name</th>
    <th style="width:20%">First Name</th>
    <th style="width:40%">Street</th>
    <th style="width:20%">City</th>
  </tr>

  <tbody>
    <span *ngFor="let i of x">
      <tr>
        <td>{{i.lastName}}</td>
        <td>{{i.firstName}}</td>
        <td>{{i.address.street}}</td>
        <td>{{i.address.city}}</td>
      </tr>
    </span>
  </tbody>
</table>

Все поля таблицы отображаются в столбце «Фамилия».

Прикрепленное изображение показывает, как выглядит моя таблица.

Answer 1

    <table border="1" style="width:70%">


    <thead>
        <tr bgcolor="lightblue">
          <th style="width:20%">Last Name</th>
          <th style="width:20%">First Name</th>
          <th style="width:40%">Street</th>
          <th style="width:20%">City</th>
        </tr>
      </thead>



  <tbody>
    <tr>
      <td>Fuller</td>
      <td>Andrew</td>
      <td>908 W. Capital Way</td>
      <td>Tacoma</td>
    </tr>

    <tr>
      <td>Fuller</td>
      <td>Andrew</td>
      <td>908 W. Capital Way</td>
      <td>Tacoma</td>
    </tr>

    <tr>
      <td>Fuller</td>
      <td>Andrew</td>
      <td>908 W. Capital Way</td>
      <td>Tacoma</td>
    </tr>

    <tr>
      <td>Fuller</td>
      <td>Andrew</td>
      <td>908 W. Capital Way</td>
      <td>Tacoma</td>
    </tr>
  </tbody>
</table>

Не переносите <tr> в тег <span>, вы можете использовать <span> внутри <td>.

Запуск цикла на <tr> из <tbody>.

Дайте мне знать, если у вас все еще есть проблема.

Answer 2

Удалите span, он не принадлежит таблице (кроме как в ячейке).Вместо этого поместите ngFor в tr.