如果ngFor中的active属性为true,如何获取成员长度

时间:2017-12-04 15:56:46

标签: angular

我有一系列对象,并且在ng中我希望如果团队中的成员处于活动状态,则会让成员计数。如下例所示,第一个成员数组有2个成员,但只有一个是活动的,所以我应该得到长度或计数1,在第二个成员数组中有2个成员,两个都是活动的,所以counet应该是2.是否可以使用ngFor获取它或者还有其他方式。任何帮助表示赞赏。

{
"name": "Team 1",   
"members": [{           
        "active": true,
        "fullName": "TEST",
        "teamId": "xxx"         
    }, {            
        "active": false,
        "fullName": "ghgfhfghgfh"
    }
],
"childTeam": [{
        "name": "CTeam1",
        "members": [{                   
                "active": true,
                "fullName": "fghfhgfh"
            }, {                    
                "active": true,
                "fullName": "retweew"
            }
        ]
    },{
        "name": "CTeam2",
        "members": [{                   
                "active": true,
                "fullName": "fghfhgfh"
            }, {                    
                "active": true,
                "fullName": "retweew"
            },
            {                   
                "active": true,
                "fullName": "ddgfdgd"
            }
        ]
       } 
    ]
}

我在ngFor中使用它如下 -

    <div *ngFor="let membs of node.data.members; let i = index">
  <div *ngIf="membs.active && node.data.members.length === 1">
    <div class="pull-left leadIcon">
      <mat-icon *ngIf="membs.active">person</mat-icon>
    </div>
  </div>
  <div *ngIf="membs.active && node.data.members.length > 1">
    <div class="pull-left"> {{ node.data.members.length }}</div>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

关于HTML的方式

 <div *ngIf="node.data.members.length >= 1">
    <div class="pull-left"> {{getActives()}}</div>
 </div>

在TS中做:

getActives(){
   return this.node.data.members.filter(member => member.active == true).length;
  }

没有材料的Plunkr正常工作:

https://plnkr.co/edit/w8mFjK1puVApgczcHVEE