angular *ngFor 控制循环次数 指定次数

前言

有时候页面循环，我们想按照次数循环，类似于Java的​​for(i=1;i<arr.length;i++)​​​形式，但是angular的​​*ngFor​​并不支持此操作，所以就得变个思维，指定循环次数

操作

1. 首先我们定义一个数组,这个数组的长度为你想要循环的最大次数

arr = [ 1, 2, 3, 4, 5];

2. 我们还是利用循环 然后使用​​*ngIf​​控制循环次数，达到指定的效果（有数据则显示 无数据不做新增行）

<ng-container *ngFor="let i of arr;let n=index"  >
                                <tr  *ngIf="n< 5-data.lineList.length" >
                                    <td>  </td>
                                    <td>  </td>
                                    <td>  </td>
                                    <td>  </td>
                                    <td [attr.rowspan]="i===0?5:1" *ngIf="i== 0">
                                          
                                    </td>
                                </tr>
                            </ng-container>

3. 直接循环所有次数 无数据填空白

<tbody>
         <tr *ngFor="let data of data; index as i;">
               <td>{{data.shipArticleName?data.shipArticleName:'  '}}
               </td>
               <td>{{data.meteringUnit?data.meteringUnit:'  '}}
               </td>
               <td>{{data.amount?data.amount:'  '}}
               </td>
               <td [attr.rowspan]="i===0?5:1" *ngIf="i== 0">{{shipCause?shipCause:'  '}}
               </td>
         </tr>
   </tbody>

4. 如果有其他办法 可欢迎留言

​​受这篇文章启发《angular2 ngfor循环》​​