ng格式化表格

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>的{​​{1}}上运行循环。

如果您仍然遇到问题，请告诉我。