时间戳

首页 > 解决方案 > 将 ngFor 中的项目分成两个列表

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>

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

标签： angularngfor

解决方案

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

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 示例基于您的代码的缩减版本。

有关详细信息和配置选项，请参阅Mozilla - flexbox 的概念。

对于您的示例，在类的循环内添加一个额外的 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>

推荐阅读