Question

我正在HTML文件上使用json数组显示数据-我成功地从数组中获取数据，但是当我尝试在出勤数组中显示数据时（使用getAttendance.attendance [0] .type），我仅显示出勤矩阵中的第一个数据。

这是数组的结构：

这是我显示数据的HTML

<div id="attendances" class="list-group-item" style="position: relative;"  *ngFor="let getAttendance of getAttendances">
                <div class="container-fluid">
                  <div class="row">
                    <div class="user col-sm-12 col-md-2">
                      <div class="user-wrapper">
                      <span class="ellipsis" style="vertical-align: sub;">{{ getAttendance.convertStartTimeRaw | date }}</span>
                      </div>
                    </div>
                    <div class="timeline col-sm-12 col-md-9">
                      <!-- Display Date -->
                      <div class="progress w-100" *ngIf="getAttendance.attendance.length === 0" style="margin-top: 10px;">
                        <!-- Start -->
                        <div class="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.timedInOverDay + '%'}">
                        </div>
                        <div class="progressbar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.durationOverDay + '%'}"></div>
                      </div>

                      <div class="progress w-100" *ngIf="(getAttendance.attendance)?.length > 0 && getAttendance.attendance[0].regularHours >= 9" style="margin-top: 10px;">

                        <!-- With Pre Overtime -->
                        <div class="progressbar preOTregulartime" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].preOvertimeOverDay + '%'}"></div>
                        <!-- Pre Overtime -->
                        <div class="progressbar earlyIn" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].absoluteTotalHoursInMins + '%', 'background-color': getAttendance.attendance[0].type == 'ot' ? '#9744BE' : '#607D8B'}"></div>

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar bg-success regulartime" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].timeInOverEndTime + '%'}"></div>
                        <!-- With Pre Overtime: END -->

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar LateOut" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].endTimeOverTimeOut + '%', 'background-color': getAttendance.attendance[0].type == 'ot' ? '#9744BE' : '#607D8B'}"></div>
                        <!-- With Pre Overtime: END -->



                        <!-- Start Duration of Day -->
                        <!-- <div class="progressbar" role="progressbar" *ngIf="getAttendance.attendance[0].regularHours > 0 && getAttendance.attendance[0].totalHoursInMins > 0" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.timedInOverDay + '%'}">
                        </div> -->
                        <!-- Time In Regular Hours -->
                        <!-- <div class="progressbar bg-success" *ngIf="getAttendance.attendance[0].regularHours > 0 && getAttendance.attendance[0].totalHoursInMins > 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].overtime + '%'}"></div> -->

                        <!-- Undertime -->
                        <!-- <div class="progressbar bg-danger undertime" *ngIf="getAttendance.attendance[1] && getAttendance.attendance[1].undertimeInMins && getAttendance.durationOverDay != '0'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[1].undertime + '%'}"></div> -->

                        <!-- Overtime -->
                        <!-- <div class="progressbar bg-purple overtime" *ngIf="getAttendance.attendance[0].totalHoursInMins > 0 && getAttendance.durationOverDay != '0' && getAttendance.attendance[0].totalHoursInMins > 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].overtime + '%'}"></div> -->

                      </div>

                      <div class="progress w-100" *ngIf="(getAttendance.attendance)?.length > 0 && getAttendance.attendance[0].regularHours < 9" style="margin-top: 10px;">

                        <div class="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.timedInOverDay + '%'}">
                        </div>

                        <div class="progressbar bg-danger" *ngIf="getAttendance.attendance[0].halfday < 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].exception + '%'}">
                        </div>

                        <div class="progressbar bg-success" *ngIf="getAttendance.attendance[0].halfday < 0 && getAttendance.attendance[0].undertime < 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].overtime + '%'}">
                        </div>

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar bg-success regulartime" *ngIf="getAttendance.attendance[0].undertime >= 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].timeInOverEndTime + '%'}"></div>
                        <!-- With Pre Overtime: END -->

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar LateOut" *ngIf="getAttendance.attendance[0].undertime >= 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].endTimeOverTimeOut + '%', 'background-color': getAttendance.attendance[0].type == 'ot' ? '#9744BE' : '#607D8B' }"></div>
                        <!-- With Pre Overtime: END -->

                        <div class="progressbar bg-danger" *ngIf="getAttendance.attendance[0].undertime < 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].absoluteUndertime + '%'}">
                        </div>
                      </div>

                    </div>
                    <div class="total col-sm-12 col-md-1">
                      <div class="total-wrapper font-weight-bold" style="margin-top: 9px; text-align: center">{{ getAttendance.attendance[0] ? getAttendance.attendance[0].regularHours : '0' }} Hrs</div>
                    </div>
                  </div>
                </div>
              </div>

我正在努力确定条件，如果出席者数组的类型为“ ot”，则背景色为“＃9744BE”，否则为“＃607D8B”

或者如何动态显示或获取出席阵列中的数据。

提前谢谢！

Answer 1

您可以再次使用* ngFor。因此，使用getAttendance.attendance[0]代替*ngFor="let attendance of getAttendance.attendance"，然后使用attendance.type

Answer 2

如果仅涉及CSS（设置背景），则无需再次迭代整个子级集合。相反，您可以对数组使用find / findIndex并检查所需条件是否满足，并相应地执行逻辑。

检查此小提琴：jsfiddle.net/harshadray/arw86gmd/3

<!DOCTYPE html>
<html>

  <body>

    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>

    <script>
      var ages = [{
        x: 1
      }, {
        x: 2
      }, {
        x: 3
      }, {
        x: 4
      }];

      function checkAdult(age) {
        return age.x == 3; // condition
      }

      function myFunction() {
        document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
      }

    </script>
  </body>

</html>

如果输出> 0，则可以说元素不存在。

如何使用ngFor使json数组内部的数组动态化？

2 个答案: