Angular2 ng如何計算循環值的數量？

我正在使用ngFor來循環8個json對象，我不僅要循環值，而且要計算循環值的數量並顯示數字。Angular2 ng如何計算循環值的數量？

例如，如果 JSON值

Content:{ 
0:"Content1", 
1:"Content2", 
2:"Content3", 
3:"Content4", 
4:"Content5", 
5:"Content6", 
6:"Content7", 
7:"Content8" 
}

我不僅要顯示循環「內容」的價值觀，但我也想算來，這樣的結果可能是下面這樣。

1 <- counting 
Content1 

2 
Content2 

3 
Content3 

4 
Content4 

5 
Content5 

6 
Content6 

7 
Content7 

8 
Content8

來源

2017-04-17 Lea

關於文檔： https://angular.io/guide/structural-directives#inside-ngfor和 https://angular.io/api/common/NgForOf

假設你有一個迭代：

let content=[ 
    "Content1", 
    "Content2", 
    "Content3", 
    "Content4", 
    "Content5", 
    "Content6", 
    "Content7", 
    "Content8" 
]

然後你可以遍歷並與數：

<li *ngFor="let item of content; let i = index"> 
    {{i+1}} {{item}} 
</li>

如果您想迭代一個對象，而不是對象的數組，檢查How to iterate [object object] using *ngFor in Angular 2

對於記錄，您需要自定義管道：

@Pipe({ name: 'keys', pure: false }) 
export class KeysPipe implements PipeTransform { 
    transform(value: any, args: any[] = null): any { 
     return Object.keys(value)//.map(key => value[key]); 
    } 
}

因此，這將是

<li *ngFor="let key of objs | keys; let i = index"> ...

來源

2017-04-17 01:39:49

Demo

<ul> 
    <li *ngFor="let item of items; let i = index"> 
    {{i}}. {{item}} 
    </li> 
</ul> 
{{items ? items.length : ''}}

您可以只打印items數組的長度。

來源

2017-04-17 01:47:01

Angular2 ng如何計算循環值的數量？

回答

相關問題