show 1 data instead of all ngFor - Angular 11

Im trying to display total counts of enrollment with item.male_students & item.female_students

UPDATE
remove the ngFor now it works as expected. here's my component.html

<thead class="thead-zircon">
    <tr>
        <th>
            Total Enrollment Quick Count
        </th>
    </tr>
</thead>
<tbody class="list">
    <tr>
        <td>
            {{ maleCount + femaleCount }}
        </td>
    </tr>
</tbody>

UPDATED
here's my component.ts

data: []; 

  constructor(private apiService: ApiService) {
    super();
  }

  ngOnInit(): void {
    this.getEnrollMentCountBySex();
  }

  getEnrollMentCountBySex() {
    this.apiService.getAll('enrollments', "/count-student-enrollment-by-sex-and-academic-level")
    .subscribe(data => {
      this.data = data;
      this.maleCount = data.reduce(((acc, item) => acc + item.male_students), 0);
      this.femaleCount = data.reduce(((acc, item) => acc + item.female_students), 0);
    });
  }

Im getting object. Here's and image from api endpoint

UPDATE
But im getting all the index. I only want the total count of male & female students to be shown in table

You can do it as soon as you receive data from ajax. That's the good way I would suggest you in this case.

getEnrollMentCountBySex() {
   this.apiService.getAll('enrollments', "/count-student-enrollment-by-sex-and-academic-level").subscribe(data => {
      this.data = data;
      this.maleCount = data.reduce((acc, item) => acc + item.male_students), 0);
      this.femaleCount = data.reduce((acc, item) => acc + item.female_students), 0);
   });
}

HTML

Male Count - {{ maleCount }}
Female Count - {{ femaleCount }}

If data is being modified from user in your case and we wanted to keep UI bindings updated. Then definitely using Pipe or function call on binding would be a better idea.

@Pipe({name: 'countByProp'})
export class CountByPropPipe implements PipeTransform {
  transform(data: any, prop: string): number {
    if (!prop) throw new Error('Please pass property name');
    return data.reduce((acc, item) => acc + item[prop]), 0);
  }
}

HTML

Male Count - {{ data | countByProp: 'male_students' }}
Female Count - {{ data | countByProp: 'female_students' }}

TS

Define maleCount and femaleCount variable in your HomePage.ts

maleCount = 0;
femaleCount = 0;