我在我的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) . 但我无法弄清楚如何将其应用于动态生成的复选框 .
1 回答
您可以这样使用linq-es2015库: