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>&nbsp;&nbsp;</td>
                                    <td>&nbsp;&nbsp;</td>
                                    <td>&nbsp;&nbsp;</td>
                                    <td>&nbsp;&nbsp;</td>
                                    <td [attr.rowspan]="i===0?5:1" *ngIf="i== 0">
                                        &nbsp;&nbsp;
                                    </td>
                                </tr>
                            </ng-container>

3. 直接循環所有次數 無數據填空白

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

4. 如果有其他辦法 可歡迎留言

受這篇文章啓發《angular2 ngfor循環》