Angular - 顯示連續複選框的具體數量

我正在使用Angular 4創建表單。表單中的一個控件是複選框列表。Angular - 顯示連續複選框的具體數量

站的列表是從web服務獲取。爲了簡單起見，我對Stations數組進行了硬編碼。對於這些電臺中的每一個，我想顯示一個複選框（在「電臺」表格組下，以便所有選定的電臺可以在「電臺」表格組下提交）。這個Plnkr完成了它所期望的功能，即爲每個電臺顯示一個複選框。

但是，我想對複選框的呈現方式有一些控制。現在，每個複選框都在它自己的一行中。我想顯示，可以說，每行5個複選框。

由於在HTML中做這件事非常複雜，我決定將站點數組轉換爲二維數組，然後遍歷HTML中的二維數組以顯示每行5個複選框。

這是Plnk用於2D陣列的嘗試2D Plnkr - not working

<table> 
      <div class="checkbox checkbox-primary" formGroupName="station" 
       *ngFor="let station of stations2D; let i = index"> 
       <tr> 
       <td><input id="{{ station[i][0] }}" formControlName="{{station[i][0] }}" type="checkbox" [checked]=false> {{station[i][0]}}</td> 
       <td><input id="{{ station[i][0] }}" formControlName="{{station[i][1] }}" type="checkbox" [checked]=false> {{station[i][1]}}</td> 
       <td><input id="{{ station[i][0] }}" formControlName="{{station[i][2] }}" type="checkbox" [checked]=false> {{station[i][2]}}</td> 
       <td><input id="{{ station[i][0] }}" formControlName="{{station[i][3] }}" type="checkbox" [checked]=false> {{station[i][3]}}</td> 
       <td><input id="{{ station[i][0] }}" formControlName="{{station[i][4] }}" type="checkbox" [checked]=false> {{station[i][4]}}</td> 
      </tr> 
      </div> 
      </table>

這是行不通的。雖然顯示覆選框，但沒有標籤，並且在控制檯中出現一堆錯誤，指出「無法找到控件」。我在設置控件時做了什麼錯誤？這種方法甚至是有效的，還是有更好的方法來實現這一目標？

來源

2017-07-17 swati

您可以在每五個工作站之後添加一個簡單的css類來換行。不需要爲它創建二維數組。

CSS：做

.five-a-row{ 
    float:left; 
    display:table-column; 
    width:20%; 
} 

.main-box{ 
    width: 100%; 
}

Edited plunker demo

來源

2017-07-17 13:34:09 Nehal

這是真棒，我沒有意識到有可能使用CSS來做到這一點。但是，我可以看到一個問題。複選框沒有正確對齊。例如，StationJ的複選框位於StationE的複選框左側，看起來不太整齊。我希望StationJ，StationE和StationO的複選框相互對齊。對於恰好在同一列中的其他複選框也是如此。 – swati

我已經更新了答案，檢查提交的代碼和演示 – Nehal

最好的辦法是使用切片管道將角提供處理它。 Here is the working plunker for your code.我已經做出了每行分4個複選框的代碼。

要做的方法是確定組件端的總行數，然後添加切片管道來處理其餘的功能。

內部組件做到這一點：

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

你ngOnInit內做到這一點：

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>

來源

2017-07-17 14:09:08

Angular - 顯示連續複選框的具體數量

回答

相關問題