使用 ngfor 的每行最大数量答案

【问题标题】：Max number per row with ngfor使用 ngfor 的每行最大数量
【发布时间】：2018-09-07 04:20:20
【问题描述】：

ngFor 达到 10 次图像重复后是否可以在 'td' 中创建新行，现在图片全部显示在一个 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>

【问题讨论】：

您应该创建数组数组，“行”的第一个维度，“项目”的第二个维度
尝试使用 for 循环的索引 *ngFor="let row of pics; let i = index"，拥有索引可以让您知道何时添加新行

标签： css angular html-table repeat

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

没有表格，更容易控制样式

【解决方案3】：

<td>
    <tr ng-repeat="row in arrange(pics, 10)">
        <td ng-repeat="pic in row">
            <div class="checkbox">
                <label>
                    <input type="checkbox" 
                        [checked]="row.checked" 
                        value="{{row.url}}" 
                        (change)="addpic($event.target.checked, row.id)">
                </label>
            </div>                                 
            <img src="{{pic}}"
        </td>
    </tr>
</td>

arrange(pics, numberPerRow) {
    var arrangedArray = [];
    while (pics.length > numberPerRow) {
        arrangedArray.push(arrangedArray.splice(0, numberPerRow));
    }
    arrangedArray.push(pics);
    return arrangedArray;
}

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

【讨论】：