使用ngfor的每行最大数量

Question

是否可以在＆＃39; td＆＃39;中创建新行？在ngFor达到10个图像重复之后，现在pics会在一个td中显示并随着它越来越多而缩小？

<td *ngFor="let row of pics">
      <div class="checkbox">
          <label><input type="checkbox" [checked]="row.checked" value="{{row.url}}" (change)="addpic($event.target.checked, row.id)"></label>
       </div>                                 
       <img src="{{picroute}}{{row.img}}>
</td>

Answer 1

<tr *ngFor="let page of [0,1,2,3,4,5,6,7,8,9,10,11,12].slice(0,pics/10)">
   <td *ngFor="let row of pics.slice(page*10,(page+1)*10">
      <div class="checkbox">
          <label><input type="checkbox" [checked]="row.checked" 
                     value="{{row.url}}" (change)="addpic($event.target.checked, row.id)">
          </label>
       </div>                                 
       <img src="{{picroute}}{{row.img}}>
   </td>
</tr>

Answer 2

我认为flex-box可能更有用，你可以根据需要控制收缩率，最重要的是，只需要一维数组。

Answer 3

null

这是一个有点优雅的解决方案imo，只需相应地替换变量。