ngFor正在复制ngFor scoope中的tbody标签

Question

我有以下表格代码：

<tbody>
  <div *ngFor="let lin of items | paginate: { itemsPerPage: 10, currentPage: bus.page, totalItems:oResponse.total }" style="border: 1px dashed blue;">
     <tr class="accordion-toggle" data-toggle="collapse" data-target="#{{lin.id}}">
        <td>{{lin.A}}</td> 
        <td>{{lin.B}}</td> 
        <td>{{lin.C}}</td> 
     </tr>
     <tr>
         <td colspan="3"> 
           <div id="{{lin.id}}" class="collapse in">
              <div>{{lin.D}}</div>                      
              <div>{{lin.E}}</div>
              <div>{{lin.F}}</div>
              <div>{{lin.G}}</div>
            </div>
          </td>
     </tr>
  </div>
</tbody>

我期望结果是一个表格，每个ngfor迭代次数，第一个带有A，B和C数据，第二个带有colspan 3的单行和带崩溃行为的所有数据请求。

问题是在每个ngFor的迭代中创建了一个新标记，所以我的表完全被破坏了。我该怎么做才能避免这种行为？

Answer 1

使用ng-container而不是div来维护表结构。

Angular ng-container是一个分组元素，不会干扰样式或布局，因为Angular不会将它放在DOM中。

 <tbody>
  <ng-container *ngFor="let lin of items | paginate: { itemsPerPage: 10, currentPage: bus.page, totalItems:oResponse.total }" style="border: 1px dashed blue;">
     <tr class="accordion-toggle" data-toggle="collapse" data-target="#{{lin.id}}">
        <td>{{lin.A}}</td> 
        <td>{{lin.B}}</td> 
        <td>{{lin.C}}</td> 
     </tr>
     <tr>
         <td colspan="3"> 
           <div id="{{lin.id}}" class="collapse in">
              <div>{{lin.D}}</div>                      
              <div>{{lin.E}}</div>
              <div>{{lin.F}}</div>
              <div>{{lin.G}}</div>
            </div>
          </td>
     </tr>
  </ng-container>
</tbody>

Answer 2

你的外部div元素放错了地方（它不属于那里）。在tbody中你应该只包含tr而不是div元素。

你必须一起从表中删除div元素，如果你想重复行，则将属性移动到tr。