将 ngFor 中的项目分成两个列表

Question

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

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

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

Answer 1

简单的方法是 css 使用 flexbox，它为内部元素提供水平布局和许多控制布局的选项，例如：

html:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css:

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

如果例如你想为每行设置一定数量的复选框，添加这个（将设置为每行 5 个）：

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

StackBlitz example 基于您的代码的缩减版本。

有关详细信息和配置选项，请参阅 Mozilla - concepts of flexbox。

对于您的示例，使用 class:

添加一个额外的 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>

将 ngFor 中的项目分成两个列表

divide items in ngFor into two lists

angular

ngfor