Angular 角度-在一行中显示特定数量的复选框

我正在使用Angular 4创建一个窗体。表单中的一个控件是复选框列表

请参考Plnkr

站点列表是从Web服务获取的。为简单起见，我对Stations数组进行了硬编码。对于这些站点中的每一个，我想显示一个复选框（在“站点”窗体组下，这样所有选定的站点都可以在“站点”窗体组下提交）。该Plnkr完成了预期的功能，即为每个站点显示一个复选框

但是，我希望能够控制复选框的呈现方式。现在，每个复选框都在自己的一行中。我想显示，比方说，每行5个复选框

由于在HTML中执行此操作非常复杂，因此我决定将stations数组转换为2D数组，然后在HTML中迭代2D数组，每行显示5个复选框

这是2D阵列尝试的Plnk

{{station[i][0]}
{{station[i][1]}
{{station[i][2]}
{{station[i][3]}
{{station[i][4]}

这是行不通的。当显示复选框时，并没有标签，控制台中有大量错误，说明“找不到控件”。

---

设置控件时我做错了什么？这种方法是有效的，还是有更好的方法来实现这一点

您可以在每五个站点之后为换行添加一个简单的css类。无需为其创建二维阵列

css:

---

最好的方法是使用Angular提供的切片管进行处理。我已经做了代码，每行划分4个复选框

方法是确定组件端的行总数，然后添加切片管道来处理其余的功能

在组件内部执行以下操作：

public rows:Array<any> = [];
public numElement = 4; // No of elements per Row

this.rows = Array.from(Array(Math.ceil(this.stations.length / this.numElement)).keys()); 

在HTML中，使用如下切片管道：

 <div *ngFor="let r of rows" style="display:flex;">
     <div class="checkbox checkbox-primary col-md-3" style="float:left;" formGroupName="station" 
              *ngFor="let station of stations | slice:(r*numElement):(numElement*(r+1));">
              <input id="{{ station }}" formControlName="{{station }}" type="checkbox" [checked]=false> {{station}}
            </div>
            </div>

{{station}}

这太棒了，我没有意识到使用CSS可以做到这一点。然而，我可以看到一个问题。复选框未正确对齐，一个接一个。例如，StationJ的复选框位于StationOne复选框的左侧，看起来不太整洁。我希望StationJ、StationOne和StationO的复选框一个接一个地对齐。同一列中的其他复选框也是如此。我已经更新了答案，检查了升级的代码和演示

this.rows = Array.from(Array(Math.ceil(this.stations.length / this.numElement)).keys()); 

 <div *ngFor="let r of rows" style="display:flex;">
     <div class="checkbox checkbox-primary col-md-3" style="float:left;" formGroupName="station" 
              *ngFor="let station of stations | slice:(r*numElement):(numElement*(r+1));">
              <input id="{{ station }}" formControlName="{{station }}" type="checkbox" [checked]=false> {{station}}
            </div>
            </div>