Angular 2在每行中仅动态绑定3个复选框答案

【问题标题】：Angular 2 Bind only 3 checkboxes in each row dynamicallyAngular 2在每行中仅动态绑定3个复选框
【发布时间】：2019-06-13 07:19:04
【问题描述】：

我动态绑定复选框，但不管复选框的数量，我只需要在每行中显示 3 个复选框。我怎样才能做到这一点？不仅是复选框，我们如何才能在 Angular 的每一行中只显示 3 个动态数据？

注意：数据将是动态的。

<table>
  <ng-container *ngFor="let aar of appAccessRights">
    <tr>
      <td>
        <ul>
          <li *ngFor="let item of aar.applicationPermissions">
            <input type="checkbox" id="AppPermissions{{item.id}}" class="k-checkbox" name="AppPermissions{{item.id}}">
            <label class="k-checkbox-label" for="AppPermissions{{item.id}}">{{item.permissions}}</label>
          </li>
        </ul>
      </td>
    </tr>
  </ng-container>
</table>

【问题讨论】：

当你说每行只需要 3 个复选框时，你的意思是只有 3 个 li 元素吗？
@ConnorsFan 意味着我将获得大约 20 个用于 api 复选框的 json 数据......我需要在表格中显示 20 个复选框，但我只需要在每行中显示 3 个复选框。这样每行就会有 7 行和 3 个复选框。

标签： angular checkbox dynamic html-table

【解决方案1】：

我知道的最简单的方法是使用Angular's flex-layout library。有了这个，您有多个选项来创建具有行环绕的行或具有特定宽度的网格。 The wiki 是另一个很好的直接链接，可以获取更多相关信息。

wrap 选项的描述更多 here。

一个伪例子可能是：

<div fxLayout="row wrap">
    <ng-container *ngFor="let item of aar.applicationPermissions">
        <div fxFlex="33.3">
            <input type="checkbox" id="AppPermissions{{item.id}}" class="k-checkbox" name="AppPermissions{{item.id}}">
            <label class="k-checkbox-label" for="AppPermissions{{item.id}}">{{item.permissions}}</label>
        </div>
    </ng-container>
</div>

【讨论】：