多个 ngFor 内表答案

【问题标题】：Multiple ngFor inside tables多个 ngFor 内表
【发布时间】：2018-03-29 01:04:25
【问题描述】：

问题：带有图像标签 {{im.url}} 的 td 显示一个在另一个下方的图像，但我需要的是水平并排显示它们，
是否可以将该 td 扩展/合并为第一行的大小，以便我可以并排放置 5 张图像？

    <tbody>
      <tr *ngFor="let row of tasks;  let i = index" colspan="6">
        <td class="text-left" >
          <b>
            <u>{{row.lowtask}}</u>
          </b>
          <tr *ngFor="let t of row.time">
            <td class="text-left">{{t.time1}}</td>
            <td class="text-center">{{t.time2}}</td>
            <td class="text-center">{{t.time3}}</td>
            <td class="text-right">{{cnvert(t.cur1)}} </td>
            <td class="text-right">{{convert(t.cur2)}} </td>                                       
          </tr>
          <tr *ngFor="let im of row.images">                                         
            <td>
              <img src="{{im.url}}" class="thumb"/>
            </td>                                                                    
          </tr>                                    
        </td>                            
      </tr>                      
     </tbody>

【问题讨论】：

只需将内部*ngFor从tr移动到td标签
请点击对您最有帮助的答案左侧的复选标记来关闭您的问题

标签： css angular html-table

【解决方案1】：

您需要调整您的ngFor。给你：

<tbody>
   <tr *ngFor="let row of tasks;  let i = index" colspan="6">
              <td class="text-left" >
                 <b>
                     <u>{{row.lowtask}}</u>
                 </b>
                  <tr *ngFor="let t of row.time">
                     <td class="text-left">{{t.time1}}</td>
                     <td class="text-center">{{t.time2}}</td>
                     <td class="text-center">{{t.time3}}</td>
                     <td class="text-right">{{cnvert(t.cur1)}} </td>
                     <td class="text-right">{{convert(t.cur2)}} </td>                                       
                   </tr>
                   <tr>                                         
                     <td *ngFor="let im of row.images">
                       <img src="{{im.url}}" class="thumb"/>
                     </td>                                                                    
                   </tr>                                    
              </td>                            
     </tr>                      
 </tbody>

【讨论】：

是的，但是现在在上面创建的每个 td 下显示图像...第一个图像在 td {{t.time1}} 下，第二个在 td {{t.time2}} ....etc 下，但是它看起来很糟糕，因为这些 td 的大小不同，所以图像之间的距离不同

【解决方案2】：

将您的 td 包裹在 <ng-container> 中

<tbody>
       <tr *ngFor="let row of tasks;  let i = index" colspan="6">
                  <td class="text-left" >
                     <b>
                         <u>{{row.lowtask}}</u>
                     </b>
                      <tr *ngFor="let t of row.time">
                         <td class="text-left">{{t.time1}}</td>
                         <td class="text-center">{{t.time2}}</td>
                         <td class="text-center">{{t.time3}}</td>
                         <td class="text-right">{{cnvert(t.cur1)}} </td>
                         <td class="text-right">{{convert(t.cur2)}} </td>                                       
                       </tr>
                       <tr>  
                        <ng-container  *ngFor="let im of row.images">                                       
                         <td>
                           <img src="{{im.url}}" class="thumb"/>
                         </td>  
                         </ng-container>                                                                  
                       </tr>                                    
                  </td>                            
         </tr>                      
     </tbody>

【讨论】：

无需换行至ng-container
没必要。没有区别，如果*ngFor写在td元素中
我只是提供了一个替代解决方案，是的，它与在 td 中使用 *ngfor 相同，但 Angular 没有将它放入 DOM，所以它无关紧要。