显示 1 个数据而不是所有 ngFor Angular 11

您可以在收到来自AJAX的数据后立即执行此操作.在这种情况下，这是我建议你的好办法.

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);
   });
}

超文本标记语言

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

在您的情况下，如果从user修改为data，并且我们希望保持UI绑定的更新.那么在绑定上使用Pipe或function调用肯定会是一个更好的主意.

@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);
  }
}

超文本标记语言

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

TS个

在您的HomePage.ts中定义maleCount和femaleCount变量

maleCount = 0;
femaleCount = 0;