Angular 组件表中每个循环的嵌套位置在哪里？答案

【问题标题】：Where to put nested for each loops in an Angular component table?Angular 组件表中每个循环的嵌套位置在哪里？
【发布时间】：2018-03-28 08:58:31
【问题描述】：

我有几个表格，它们显示在每个循环中。在每个表格行中，每个循环都有两个额外的循环，它们都适用于一行中的项目

我不确定每个循环的第二个放在哪里。我可以做这样的事情

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

显示第一组数据。但是，我需要在trs 中显示的一些属性嵌套在item 内的一个数组中，因此我需要为每个属性再添加一个。

我最初的尝试是尝试添加另一个标签（用 div/span 包围 tr，将 key 的 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

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

在第二种情况下，您应该在 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>

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

【讨论】：