时间戳

首页 > 解决方案 > Angular 5 NgFor - 循环遍历元素并检测已经渲染的元素

javascript - Angular 5 NgFor - 循环遍历元素并检测已经渲染的元素

问题描述

我创建了一个红绿灯，根据从数据库传递的值显示（红色、黄色、绿色）圆圈。

目前，我正在使用颜色显示报告的状态。如果数组中只有 1 个对象，*NgFor 循环可以很好地将颜色放置在它们所属的位置。如果 reportId(report) 不在数据中，则会出现一个“绿色”圆圈，这就是它应该出现的方式。一次只能显示3种颜色，不能重复。

问题是，如果 values 数组中有第二个对象，则循环会忽略以前的值并显示一个绿色圆圈，因为该 reportId 已经存在一个值，所以应该忽略它。如前所述，如果“值”数组中只有 1 个对象，则它可以完美运行，并且绿色圆圈被应用并放置在不存在的报告 ID 的正确位置，但是当有多个对象/报告列表时，它给我第二排红绿灯，忽略第一次迭代的设定值。实际上，它会将之前的reportID 视为从未存在过并放置一个绿色圆圈。

关于如何解决这个问题的任何想法？我查看了 ASYNC 管道，但不确定如何在这种情况下应用它。

在此处输入图像描述

数据如下所示：

{ key: 'Profit Loss', 
  value: [{ yellow: 'Y', red: 'N', reportId: 2 }]
},
{ key: 'Actuals', 
  value: [{ yellow: 'N', red: 'Y', reportId: 2 },
          { yellow: 'Y', red: 'N', reportId: 1 }]
}

循环的结构是这样的......

            <div *ngFor="let siteMap of reportRow; let i = index;" >
               {{ siteMap.key }}
            <div *ngFor="let pMap of siteMap.value; let xi = index;" >
                <!---Report 1---->
                <!--------------->
                <tr *ngIf="pMap.yellow === 'Y' && pMap.reportId === 1">
                  <td><span class="yellowcolor"></span> <b>Report 1 Yellow</b></td>
                </tr>
                <tr *ngIf="pMap.red === 'Y' && pMap.reportId === 1">
                  <td><span class="redcolor"></span> <b>Report 1 Red</b></td>
                </tr>
                <tr *ngIf="pMap.reportId !== 1">
                  <td><span  class="greencolor"></span><b>Report 1 Green</b></td>
                </tr>
                <!---Report 2---->
                <!--------------->
                <tr *ngIf="pMap.yellow === 'Y' && pMap.reportId === 2">
                  <td><span class="yellowcolor"></span> <b>Report 2 Yellow</b></td>
                </tr>
                <tr *ngIf="pMap.red === 'Y' && pMap.reportId === 2">
                  <td><span class="redcolor"></span> <b>Report 2 Red</b></td>
                </tr>
                <tr *ngIf="pMap.reportId !== 2">
                  <td><span  class="greencolor"></span> <b>Report 2 Green</b></td>
                </tr>
                <!---Report 3---->
                <!--------------->
                <tr *ngIf="pMap.yellow === 'Y' && pMap.reportId === 3">
                  <td><span class="yellowcolor"></span> <b>Report 3 Yellow</b></td>
                </tr>
                <tr *ngIf="pMap.red === 'Y' && pMap.reportId === 3">
                  <td><span class="redcolor"></span> <b>Report 3 Red</b></td>
                </tr>
                <tr *ngIf="pMap.reportId !== 3">
                  <td><span  class="greencolor"></span> <b>Report 3 Green</b></td>
                </tr>
            </div>

标签： javascriptangularhtmltypescriptmultidimensional-array

解决方案

@MizAkita 发布评论作为答案，因为解决方案有效。

假设您能够创建一个已经绘制报告 ID 的数组，然后您可以*ngIf在循环 for 之后再创建一个siteMap。

<div *ngFor="let pMap of siteMap.value; let xi = index;"> 
   <div *ngIf="!newArray.includes(pMap.reportId)"> ... </div> 
</div>

推荐阅读