如何在Angular 6中显示每月出勤报告

Question

我想按角度6明智地显示每月出勤日期，如下所示：

如何按日期显示员工的出勤情况。

attendance.ts和Attenance.html文件如下。

Attendance.ts

export class AttendanceSheetComponent implements OnInit {
  attendances: Attendance[];
  dates: string[];
  constructor(
    private attendanceservice: AttendanceService,
    private spinner: NgxSpinnerService
  ) {
    this.getAttendance();
  }
  getAttendance() {
    this.attendanceservice.get().subscribe(
      (res: Attendance[]) => {

        this.attendances = res;
        this.getDates(res);
        this.spinner.hide();
      },

    );
  }
  getDates(data) {
    this.dates = data.map(item => item.date)
      .filter((value, index, self) => self.indexOf(value) === index)
  }
}

Attendance.html

<thead>
  <tr>
    <th>#</th>
    <th>Name</th>
    <th *ngFor="let dates of dates" class="verticalTableHeader">
      <p>{{dates}}</p>
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let attendance of attendances; let i = index">
    <td>
      {{ i + 1 }}
    </td>
    <td>
      {{attendance.firstname}} {{attendance.lastname}}
    </td>
    <td>
      {{attendance.title}}
    </td>
    <td>
      {{attendance.attendance}}
    </td>
  </tr>
</tbody>

Answer 1

在ngFor和pas中使用您要放置在标题顶部的日期值中的函数，这基本上将返回该日期的出勤，也必须将日期和出勤作为嵌套循环，即对于每个循环日期值，您需要出勤值。

.html

<tr *ngFor="let attendance of getAttendanceForDate('dates'); let i = index">

.ts

public getAttendanceForDate(date:any){
return this.attendance.filter(x => x.date === date);
}

对于CSS部分，请放

<th *ngFor="let dates of dates"><span class="bar">|</span></th>

在<tbody>之前使用虚线，然后再次放置另一个

<td><span class="bar">|</span></td> 

在考勤显示循环中。