json Angular2 ngFor 如何计算循环值的数量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43443963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 ngFor how to count the number of looping values?
提问by Lea
I am using ngFor to loop 8 json objects and I want not only to loop the values but also I want to count the number of looping values and display the number.
我正在使用 ngFor 来循环 8 个 json 对象，我不仅想循环这些值，还想计算循环值的数量并显示该数字。
For example, if json value is
例如，如果 json 值是
Content:{
0:"Content1",
1:"Content2",
2:"Content3",
3:"Content4",
4:"Content5",
5:"Content6",
6:"Content7",
7:"Content8"
}
I not only want to display looping values of 'Content', but I also want to count them so that the result could be this below.
我不仅想显示“内容”的循环值，而且还想对它们进行计数，以便结果如下所示。
1 <- counting
Content1
2
Content2
3
Content3
4
Content4
5
Content5
6
Content6
7
Content7
8
Content8
回答by aldo.roman.nurena
Iterating over array
迭代数组
Regarding the docs: https://angular.io/guide/structural-directives#inside-ngforand https://angular.io/api/common/NgForOf
关于文档：https: //angular.io/guide/structural-directives#inside-ngfor和 https://angular.io/api/common/NgForOf
Say you have an iterable:
假设你有一个可迭代的：
let content = [
"Content1",
"Content2",
"Content3",
"Content4",
"Content5",
"Content6",
"Content7",
"Content8"
]
Then you can iterate and count with:
然后你可以迭代和计数：
<li *ngFor="let item of content; let i = index">
{{i+1}} {{item}}
</li>
Iterating over object properties
迭代对象属性
If you want to iterate over an object rather than an array of objects, check How to iterate object keys using *ngFor
如果要迭代对象而不是对象数组，请检查如何使用 *ngFor 迭代对象键
For the record, you need a custom pipe:
作为记录，您需要一个自定义管道：
@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]);
}
}
So that would be
所以那将是
<li *ngFor="let key of objs | keys; let i = index"> ...
Update
更新
From Angular 6.1+, you can use the native KeyValuePipe.
从 Angular 6.1+ 开始，您可以使用原生的KeyValuePipe.
https://angular.io/api/common/KeyValuePipe
https://angular.io/api/common/KeyValuePipe
For the record:
作为记录：
<li *ngFor="let item of data | keyvalue; let i = index">
{{i+1}}. {{item.key}} - {{item.value}}
</li>
