Angular2 ngFor how to count the number of cycles?

Question

I use ngFor to loop 8 json objects and I want to not only encode the values, but also count the number of loops and display the number.

For example, if json is equal

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

Not only do I want to display the loop values ​​for "Content", but I also want to calculate them so that the result can be lower.

1 <- counting
Content1

2
Content2

3
Content3

4
Content4

5
Content5

6
Content6

7
Content7

8
Content8

Answer 1

As for the docs: https://angular.io/guide/structural-directives#inside-ngfor and https://angular.io/api/common/NgForOf

Say you have iterability:

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>

, , [ ] * ngFor 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"> ...

Answer 2

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

.