使用带有管道的 ngFor 计数项目 -angular 2

Question

我基本上是在尝试计算 ngFor 指令概述的列表数量。我已经遵循了很多解决方案来解决我的问题，但这并不成功。下面是我的代码，我得到了错误，没有定义父级。

管道

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {


    parent : string;
    transform(value) : any {
        let keys = [];



        if(value) {

            this.parent = value;

            return Object.keys(value)
 }
    }
}

html

<div *ngFor="let game of games">

  <div *ngFor="let key of game| keys">

  <li> {{game[key].type}} </li>

  {{ game[key].location}}

    Count: {{game.parent.length}}

</div>


</div>

输出

 mario - germany
 kart - london
 rings - france 

total number of items  = 3

Answer 1

您可以使用 ngFor 的 index 代替自定义管道

<div *ngFor="let game of games">

  <div *ngFor="let key of game| i=index ">

  <li> {{game[i].type}} </li>

  {{ game[i].location}}

    Count: {{game.parent.length}}

</div>

Answer 2

你的计数应该在 div 之外，

<div *ngFor="let game of games">
  <div *ngFor="let key of game| i=index ">
  <li> {{game[i].type}} </li>
  {{ game[i].location}}   
</div>
<div>
 total number of items: {{game.parent.length}}
</div>