假設我從服務器獲取了一個數組。 var arr = [ { ID: "001", Name: "a00", isChecked: "true" }, { ID: "002", Name: "b00", isChecked: "true" }, { ID: "003", Name: "c00", isChecked: "true" }, { ID: "004", Name: "d00", isChecked: "true" }, { ID: "005", Name: "e00", isChecked: "true" }, { ID: "006", Name: "f00", isChecked: "true" }, { ID: "007", Name: "g00", isChecked: "true" }, { ID: "008", Name: "h00", isChecked: "true" }, { ID: "009", Name: "i00", isChecked: "true" }, { ID: "010", Name: "j00", isChecked: "true" }, { ID: "011", Name: "k00", isChecked: "true" }, { ID: "012", Name: "l00", isChecked: "true" }, { ID: "013", Name: "m00", isChecked: "true" }, { ID: "014", Name: "n00", isChecked: "true" }, { ID: "015", Name: "o00", isChecked: "true" }, { ID: "016", Name: "p00", isChecked: "true" }, // ....many many rows ]現在我想將其顯示在具有一定列數的表格中。例如，如果我想將其顯示為 4 列。然后我用 <tbody> <tr *ngFor="let group of arr"> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td> </tr>預期的結果喜歡a00 | b00 | c00 | d00e00 | f00 | g00 | h00.....如果我選擇7列。那么代碼是：<tbody> <tr *ngFor="let group of arr"> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td> <td>{{group.name}}</td></tr>預期結果如下：a00 | b00 | c00 | d00 | e00 | f00 | g00.... 但是我不知道它是 4 還是 7，塊大小由變量給出size。那么該怎么做呢？
2 回答
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
您可以使用以下方法來執行此操作：
根據大小變量將數組轉換為二維數組。
現在在模板中迭代該數組。
.ts
newArr = []
size = 2; // change this as per your requirement
ngOnInit() {
while (this.arr.length) {
this.newArr.push(this.arr.splice(0, this.size)); // create 2D array
}
}
.html
<table>
<tbody>
<tr *ngFor="let outer of newArr">
<td *ngFor="let group of outer">{{group.Name}}</td>
</tr>
</tbody>
</table>
海綿寶寶撒
TA貢獻1809條經驗 獲得超8個贊
基于size變量，您可以創建一個長度為 size 的數組，并使用另一個*ngFor包含該數組的數組來渲染列。
例子
成分
class MyComponent extend OnInit {
size = 4;
sizeArray = [];
ngOnInit() {
this.sizeArray = new Array(this.size)
}
}
模板
<tbody>
<tr *ngFor="let group of arr">
<td *ngFor="let index of sizeArray">
{{group.name}}
</td>
</tr>
</tbody>
- 2 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消