Angular 将ngFor中的项目分为两个列表

以下是我的复选框列表代码：-

<div class="policy-group">
    <p><strong>Interests</strong></p>
        <div class="form-check" *ngFor="let interest of (objAccountSetting != null && objAccountSetting.BasketSettings != null && objAccountSetting.BasketSettings.Interests != null && objAccountSetting.BasketSettings.Interests.length > 0) ? objAccountSetting.BasketSettings.Interests : [];let i = index;">

          <div class="row">
                <div class="col-md-6"></div>
                </div>

                <label class="custom-chck">{{interest?.Name}}
                       <input type="checkbox" [ngModelOptions]="{standalone: true}" [value]="interest?.Id"  id="{{interest?.Id}}" [(ngModel)]="objAccountSetting.BasketSettings.Interests[i].Checked" id="{{interest?.Id}}">
                      <span class="checkmark"></span>
               </label>

               <input type="hidden" name="hdnIntrestId" value="interest?.Id" [(ngModel)]="objAccountSetting.BasketSettings.Interests[i].Id">

    </div>
</div>

兴趣

{{兴趣？.Name}

---

在上面的代码中，我有一个ngFor，它正在呈现一个兴趣列表，我的问题是数据库中有数百个兴趣，所以ngFor正在打印100个项目。我想以某种方式在页面上将复选框列表拆分为几个并排的列表，这样用户就不必滚动到页面末尾

简单的方法是使用flexbox处理css，它为其中的元素提供了水平布局，并提供了许多控制布局的选项，例如：

html:

例如，如果您希望设置为每行一定数量的复选框，请添加此选项（将设置为每行5个）：

基于代码的精简版本

有关详细信息和配置选项，请参阅

对于您的示例，在类的内部循环中添加一个额外的div：

    <div class="policy-group">
        <p><strong>Interests</strong></p>
<div class="flex-container">
            <div class="form-check" *ngFor="let interest of (objAccountSetting != null && objAccountSetting.BasketSettings != null && objAccountSetting.BasketSettings.Interests != null && objAccountSetting.BasketSettings.Interests.length > 0) ? objAccountSetting.BasketSettings.Interests : [];let i = index;">

              <div class="row">
                    <div class="col-md-6"></div>
                    </div>

                    <label class="custom-chck">{{interest?.Name}}
                           <input type="checkbox" [ngModelOptions]="{standalone: true}" [value]="interest?.Id"  id="{{interest?.Id}}" [(ngModel)]="objAccountSetting.BasketSettings.Interests[i].Checked" id="{{interest?.Id}}">
                          <span class="checkmark"></span>
                   </label>

                   <input type="hidden" name="hdnIntrestId" value="interest?.Id" [(ngModel)]="objAccountSetting.BasketSettings.Interests[i].Id">
            </div>
        </div>
    </div>

兴趣

{{兴趣？.Name}

Hi，我的答案提供了解决方案吗？@JMP我还没有机会测试它，如果有帮助，我会接受你的答案。好的，谢谢，有兴趣知道，因为flexbox在测试时提供了一个很好的解决方案。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
flex: 1, 0;
width:20%;
text-align:center;
}

    <div class="policy-group">
        <p><strong>Interests</strong></p>
<div class="flex-container">
            <div class="form-check" *ngFor="let interest of (objAccountSetting != null && objAccountSetting.BasketSettings != null && objAccountSetting.BasketSettings.Interests != null && objAccountSetting.BasketSettings.Interests.length > 0) ? objAccountSetting.BasketSettings.Interests : [];let i = index;">

              <div class="row">
                    <div class="col-md-6"></div>
                    </div>

                    <label class="custom-chck">{{interest?.Name}}
                           <input type="checkbox" [ngModelOptions]="{standalone: true}" [value]="interest?.Id"  id="{{interest?.Id}}" [(ngModel)]="objAccountSetting.BasketSettings.Interests[i].Checked" id="{{interest?.Id}}">
                          <span class="checkmark"></span>
                   </label>

                   <input type="hidden" name="hdnIntrestId" value="interest?.Id" [(ngModel)]="objAccountSetting.BasketSettings.Interests[i].Id">
            </div>
        </div>
    </div>