Angular 4 ngFor 和 ngIf

Question

我正在计算我的数组中已完成的测验数量，等于 "level 1"。

每当我尝试显示 progressList 中等于级别 1 的项目数时，它都会显示 progressList 数组中所有项目的数量。

如何显示已完成的等于级别 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>

***编辑数组****

完成："Complete"， 1级， user_id:"email@email.com"

完成："Complete"，等级：2， user_id:"email@email.com"

Answer 1

试试下面的，可能你的关卡类型是string

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

EDIT

ngIf 不用于过滤数据。它是在满足条件时显示元素。你可以这样做来显示 component.ts

中的计数

完成计数：任意；

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

并在模板中

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

Angular 4 ngFor 和 ngIf

Angular 4 ngFor & ngIf

angular-ng-if

angular