Question

Am绑定复选框是动态的，但是无论复选框的数量如何，我只需要在每行中显示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>

Answer 1

我知道的最简单的方法是使用Angular's flex-layout library。有了这个，您有多个选择来创建具有行换行的行或具有特定宽度的网格。 The wiki是直接链接至此的更多信息。

here进一步介绍了wrap选项。

一个伪假的例子可能是：

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

Angular 2动态绑定每行中的3个复选框

1 个答案: