Angular中如何每行仅显示3个动态复选框及其他动态数据？

嘿，这个需求其实有好几种靠谱的实现方式，我给你拆解下最常用的几个，你可以根据自己的场景来选：

方案一：用CSS Grid（最简洁，首推！） #

这个方案完全靠样式解决，不需要修改任何数据逻辑，动态数据自动适配，省心到爆。核心就是给承载元素的容器设置网格布局，指定每行3列。

修改你的代码，给<ul>加个自定义类，然后写CSS：

<table>
  <ng-container *ngFor="let aar of appAccessRights">
    <tr>
      <td>
        <!-- 给ul添加自定义类 -->
        <ul class="permission-grid">
          <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>

对应的CSS：

.permission-grid {
  list-style: none; /* 去掉默认列表样式 */
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制每行3列，宽度自动均分 */
  gap: 1rem; /* 可选：设置元素之间的间距，让布局更美观 */
}

不管你的动态数据有多少个，Grid都会自动帮你每行排3个，超出的自动换行，完美适配各种数量的元素。

方案二：用CSS Flexbox #

如果你更习惯用Flex布局，也可以用这个方式，原理是让容器换行，每个元素占三分之一宽度：

给<ul>换个类，然后写Flex的CSS：

<!-- 把ul的类改成permission-flex -->
<ul class="permission-flex">
  <!-- 内部li结构不变 -->
</ul>

CSS代码：

.permission-flex {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 1rem;
}

.permission-flex li {
  flex: 0 0 calc(33.333% - 0.666rem); /* 每个元素占1/3宽度，减去gap的影响避免换行 */
  box-sizing: border-box; /* 确保padding和border不会撑开宽度 */
}

方案三：数据分组（适合需要对每行做额外逻辑的场景） #

如果你的需求不止是每行3个，还需要对每行（比如每个分组）做额外处理（比如加标题、分隔线），那可以先把数据分成每3个一组，再循环渲染：

首先在你的组件类里写一个分组方法：

// 通用分组方法，把数组分成每3个元素的子数组
groupByThree<T>(arr: T[]): T[][] {
  const groupedArray = [];
  for (let i = 0; i < arr.length; i += 3) {
    groupedArray.push(arr.slice(i, i + 3));
  }
  return groupedArray;
}

然后修改模板，先循环分组，再循环每个分组里的元素：

<table>
  <ng-container *ngFor="let aar of appAccessRights">
    <tr>
      <td>
        <div class="permission-container">
          <!-- 先循环每个分组 -->
          <div *ngFor="let permissionGroup of groupByThree(aar.applicationPermissions)" class="permission-row">
            <!-- 再循环分组里的每个权限项 -->
            <div *ngFor="let item of permissionGroup" class="permission-item">
              <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>
          </div>
        </div>
      </td>
    </tr>
  </ng-container>
</table>

再加一点基础样式让布局更整齐：

.permission-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem; /* 行与行之间的间距 */
}

.permission-item {
  flex: 1; /* 每个元素宽度均分 */
}

这个方案的好处是你能完全控制每个分组（每行）的逻辑，比如给某一行加特殊样式，或者每行末尾加个操作按钮之类的。

内容的提问来源于stack exchange，提问作者Chandan Y S