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>

我期望的结果是一张表，每个ng都有一对夫妇进行迭代，第一个表包含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。

ngFor正在从ngFor勺中复制tbody标签

2 个答案: