How to count the columns of a <td> showing the tatal at the end

Question

I’m making a list of calls and I need to count how many absences and justifications each student has, but I’m not getting it. Someone could shed a light.

I’m lost in that part.

    <!-- PRECISO SOMAR AS PRESENÇAS -->
    <td style="text-align: center">{{totalPresente}}</td> 
    <!-- PRECISO SOMAR AS FALTAS -->
    <td style="text-align: center">00</td>

Follows my code

stackblitz

Answer 1

Your code is a little complicated to understand, but I think it will help.

Create a method to return the amount of presences and absences of each student, traverse the object alunos using the method forEach, every loop make a filter on the object presencas using the method filter, it returns a new array with the objects that passed the test, then retrieves the number of elements from that array.

calcularPresencas () {
  this.alunos.forEach((aluno, index) => {
    // Filtra por "cd_aluno" e pela "situacao" para presença
    this.alunos[index].totalPresente = this.presencas.filter(p => p.cd_aluno === aluno.cd_aluno && p.situacao === 'p').length;
    // Filtra por "cd_aluno" e pela "situacao" para falta
    this.alunos[index].totalFalta = this.presencas.filter(p => p.cd_aluno === aluno.cd_aluno && p.situacao === 'f').length;
  });
}

Run it in the method ngOnInit() after this.getAlunos();

...
this.calcularPresencas();

In the method salvar(aluno, dia, situacao) make a filter on the object presencas for cd_aluno and nu_dia, if the number of returned elements is greater than 0 it updates the existing situation, otherwise it will add the object form in the object presencas. Then call the method calcularPresencas to update the data:

// Filtra por "cd_aluno" e "nu_dia"
let al = this.presencas.filter(p => p.cd_aluno == aluno.cd_aluno && p.nu_dia === dia);
//  Verifica se o número de elementos retornado é maior que "0"
(al.length > 0) ? al[0].situacao = situacao : this.presencas.push(form);
// Executa o método para atualizar os dados
this.calcularPresencas();

The template:

<!-- PRECISO SOMAR AS FALTAS -->
<td style="text-align: center">{{aluno.totalFalta}}</td>
<!-- PRECISO SOMAR AS PRESENÇAS -->
<td style="text-align: center">{{aluno.totalPresente}}</td>

Notice that I changed the order because I was wrong.

You can see it working in stackblitz.