格式化表格

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

删除span，它不属于表格（细胞内除外）。将ngFor放入tr中。

Answer 2

    <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>上运行循环。

如果您仍然面临问题，请告诉我。