如何用角度数组创建表行？ [英] How to create a table rows with an array in angular?

问题描述

我有一个从1到35的数组：

  numbersArray = [1,2,3,4，... 。，35] 
  

我想创建一个如下所示的html表：

  --------------------------- 
 1 | 2 | 3 | 4 | 5 | 6 | 7 
 --------------------------- 
 8 | 9 | 10 | 11 | 12 | 13 | 14 
 --------------------------- 
 15 | 16 | 17 | 18 | 19 | 20 | 21 
 --------------------------- 
 22 | 23 | 24 | 25 | 26 | 27 | 28 
 --------------------------- 
 29 | 30 | 31 | 32 | 33 | 34 | 35 
 --------------------------- 
   
 
 
我使用以下内容：
 
 
 < tr * ngFor = let number numbersArray;> 
< td> {{number}}< / td> 
< / tr> 
  
 
 
 
如何添加< / TD>< / TR>< ; TR>< TD> 后6项标签 * ngFor  
解决方案
我找到了解决方案，没有定制管道或更改数字数组
 <表> 
< tr * ngFor =让[1,2,3,4,5]的行>> 
< td * ngFor =let col of [1,2,3,4,5,6,7]> 
< div> {{numbersArray [（row-1）* 7 + col-1]}}< / div> 
< / td> 
< / tr> 
< / table> 
  
 
 
 
  https://plnkr.co/edit/VUw3j27EGVzZv8NZykWr?p=preview  
 
I have an array from 1 until 35:
numbersArray = [1,2,3,4,....,35]
I want to create a html table like the following:
---------------------------
1  |2  |3  |4  |5  |6  |7
---------------------------
8  |9  |10 |11 |12 |13 |14
---------------------------
15 |16 |17 |18 |19 |20 |21
---------------------------
22 |23 |24 |25 |26 |27 |28
---------------------------
29 |30 |31 |32 |33 |34 |35
---------------------------
I used the following:
<tr *ngFor="let number of numbersArray;">
    <td>{{number}}</td>
</tr>
How can I add </td></tr><tr><td> tags after 6 items in *ngFor?
解决方案
I found the solution without customize Pipe or changing in numbersArray
<table>
  <tr *ngFor="let row of [1, 2, 3, 4, 5]"> 
    <td *ngFor="let col of [1, 2, 3, 4, 5, 6, 7]">
    <div>{{numbersArray[(row -1) * 7 + col - 1]}}</div>
    </td> 
  </tr>
</table>
https://plnkr.co/edit/VUw3j27EGVzZv8NZykWr?p=preview

                        
这篇关于如何用角度数组创建表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！