javascript - 如何使用 ngFor 使 json 数组中的数组动态化？

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 访问它