首页 文章

在Angular组件表中为每个循环嵌套的位置？

提问于
浏览 次
0

我有几个表在每个循环中显示 . 在每个表行中，每个循环都有两个附加，它们都适用于一行中的项目

我不知道在每个循环中放置第二个 . 我可以做这样的事情

<div *ngFor="let table of tables">{{table}}
  <table>
    <tr *ngFor="let item of key">{{item.name}}</tr>
  </table>
</div>

显示第一组数据 . 但是我需要在 tr 中显示的一些属性嵌套在 item 中的一个数组中，所以我需要多一个属性 .

我最初的尝试是尝试添加另一个标签（带有div / span的环绕tr，将let项目移动到* ngFor那里，将final * ngFor添加到tr）但是那些不能嵌套在tbody / table中：

<div *ngFor="let table of tables">{{table}}
  <table>
    <div *ngFor="let item of key">
      <tr *ngFor="let subItem of item">
        <td>{{item.name}}</td>
        <td>{{subItem.address}}</td>
      </tr>
    <div>
  </table>
</div>

我可以使用有效的标签吗？我可以在一个标签上做两个* ngFor吗？

angular

2 回答

  • 0

    你应该在第二种情况下在td中进行ngFor

    就像是

    <tr *ngFor="let item of key">
  <td>{{item.name}}</td>
  <td>{{item.otherAttr}}</td>

  <td *ngFor="let subItem of item.someAttrThatIsAnArray">
    {{subItem}}
  </td>
</tr>

    正确的标记将取决于这些数据的构建方式 .

    回复于
  • 0

    您可以将 ng-container 标记用于每个循环的最后一个标记 . 所以代码看起来像

    <div *ngFor="let table of tables">{{table}}
  <table>
     <ng-container *ngFor="let item of key">
       <tr *ngFor="let subItem of item">
         <td>{{item.name}}</td>
         <td>{{subItem.address}}</td>
       </tr>
     <ng-container>
  </table>
</div>
    回复于

相关问题