How to remove duplicate entries?

Question

Angular

I have a table where the total amount should be displayed. But the problem is that because of this, I have these lines duplicated several times. How can I avoid this?

<table>
    <thead>
      <tr>
        <th style="text-align: center;">Общее кол-во</th>
       </tr>
      </thead>
      <tbody>
         <tr *ngFor="let monitoring of filteredMonitorings ">
             <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
         </tr>
     </tbody>
</table>

getTotal(arr){
    return arr.reduce( (sum, curr) => sum + parseFloat(curr.count),0 );
  }

Answer 1

<tr *ngFor="let monitoring of filteredMonitorings ">
    <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Here you iterate over the array, and at each step you add all its elements. Of course the results will be the same.
If you need to display individual elements, then instead of the total amount, you need to show the value from the current object:

<tr *ngFor="let monitoring of filteredMonitorings ">
  <td style="text-align: center">{{ monitoring.count }} </td>
</tr>

If you need to display the amount, get rid of ngFor:

<tr>
  <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>