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

2024年3月23日 107次阅读 来源: HezhezhiyuLe

前言

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

操作

  1. 首先我们定义一个数组,这个数组的长度为你想要循环的最大次数
   arr = [ 1, 2, 3, 4, 5];
  1. 我们还是利用循环 然后使用*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>
  1. 直接循环所有次数 无数据填空白
  <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>
  1. 如果有其他办法 可欢迎留言

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

    原文作者：HezhezhiyuLe
    原文地址: https://blog.csdn.net/HezhezhiyuLe/article/details/103490738
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞