使用ngFor計數項目與管道 - 角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，而不是一個自定義管道

<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之外的0，

<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>