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

    <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> 标签中，您可以在<td> 中使用<span>。

在<tr> 的<tbody> 上运行for 循环。

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

Answer 2

删除span，它不属于表格（单元格内除外）。将 ngFor 改为 tr。