Question

问题：图像标记为{{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>

Answer 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>

Answer 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>

内部表格中有多个ngFor

2 个答案: