Angular 4 ngFor & ngIf

Question

I'm looking to count the number of quizzes that have been completed in my array, that are equal to "level 1".

Whenever I try to display the count of items that are equal to level 1 in the progressList, it will display the number for all of the items in the progressList array.

How would I display the number of items that have been completed that are equal to Level 1?

 <div *ngFor="let levels of progressList | slice: 0:1; let i = index" align="center">
          <p *ngIf="levels.level == 1"> You've Completed {{progressList?.length}}/4 Lessons! </p>
        </div>

***EDIT w/ Array****

complete: "Complete", level: 1, user_id:"email@email.com"

complete: "Complete", level: 2, user_id:"email@email.com"

may be you can do filtering: instead of" let levels of progressList" you can use something like: let levels of progressList.filter(k=>k.level===1), and use "ngIf" at all — happyZZR1400, Apr 24 '18 at 19:07
It's displaying all the items in the array progressList, and not the items that are equal to level 1 @Sajeetharan — cdh429, Apr 24 '18 at 19:13
Counting and other aggregate functions are best done in the component, not in the template. — Igor, Apr 24 '18 at 19:16

Sajeetharan · Accepted Answer · 2018-04-24T19:40:07.060

1

Try the following, probably your level is of type string

<p *ngIf="levels.level === '1'"> You've Completed {{progressList?.length}}/4 Lessons! </p>

EDIT

ngIf is not used to filter data. it is to show the elements when condition is met. you can do this to show the count in component.ts

completedCount : any;

this.completedCount = progressList.filter(t=>t.level ==1).length;

and in template

<p> You've Completed {{this.completedCount}}/4 Lessons! </p>

edited Apr 24 '18 at 19:40

answered Apr 24 '18 at 19:14

Sajeetharan

216,225
63
350
396

This didn't seem to work. I have 5 items in my array, 3 of which are labeled level 1. My result I'm getting is " 5/4 Lessons Complete!" – cdh429 Apr 24 '18 at 19:26
can you post your array. – Sajeetharan Apr 24 '18 at 19:26
Just posted - I'm using a number not a string as my "level" item – cdh429 Apr 24 '18 at 19:31
ok the problem is your ngIf works its just that progressList is always the same list – Sajeetharan Apr 24 '18 at 19:32
Right - That progressList is going to grow so I'd like to essentially filter by the levels that are equal to 1 – cdh429 Apr 24 '18 at 19:37
1

Got it working! Thank you! Just curious , what does the t=>t represent? – cdh429 Apr 24 '18 at 19:52

Angular 4 ngFor & ngIf

1 Answers1