Question

我在Angular 4应用程序中使用Bootstrap 3来创建表单。在表单中，我需要根据从Web服务调用返回的数据来呈现复选框。因此，我需要迭代数据并为每个接收到的值渲染一个复选框。

这些复选框的显示位置有些混乱，如下面的屏幕截图所示 -

有没有办法在3列中显示这些复选框。像这样的东西（看起来更干净）

我目前的代码如下

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" class="form-control input-sm">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
        ...
        </div>
      </form>
    </div>
  </div>
</div>

我遇到了一些堆栈溢出的其他线程，其中包含静态复选框（Twitter Bootstrap - checkbox columns / columns within form）的示例。但我无法弄清楚如何将其应用于动态生成的复选框。

Answer 1

您可以这样使用linq-es2015库：

import { asEnumerable } from 'linq-es2015';

//somewhere in component
var groups = asEnumerable(this.options)
    .Select((option, index) => { return { option, index }; })
    .GroupBy(
              x => Math.floor(x.index / 3),
              x => x.option,
              (key, options) => asEnumerable(options).ToArray()
            )
    .ToArray();

//template's fragment
<div class="col-xs-8">
  <div class="row">
    <div class="col-xs-4">
        <label for="options" class="col-xs-4">Options</label>
    </div>            
    <div class="col-xs-8">
      <div class="row" *ngFor="let group of groups">
        <div class="col-xs-4" *ngFor="let option of group">
          <input id="{{option}}" formControlName="{{option}}" type="checkbox" [checked]=false/> {{option}}
        </div>      
      </div>              
    </div>            
  </div>
</div>

Bootstrap以3列显示动态复选框

1 个答案: