web-dev-qa-db-fra.com

Angular2 ngPour savoir comment compter le nombre de valeurs en boucle?

J'utilise ngFor pour boucler 8 objets json et je veux non seulement boucler les valeurs mais aussi je veux compter le nombre de valeurs en boucle et afficher le nombre.

Par exemple, si la valeur json est

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

Je veux non seulement afficher les valeurs en boucle de 'Content', mais je veux aussi les compter pour que le résultat soit le suivant.

1 <- counting
Content1

2
Content2

3
Content3

4
Content4

5
Content5

6
Content6

7
Content7

8
Content8
jsonangularngfor
14
Lea

Itération sur le tableau

Concernant les documents: https://angular.io/guide/structural-directives#inside-ngfor et https://angular.io/api/common/NgForOf

Disons que vous avez un itérable:

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

Ensuite, vous pouvez répéter et compter avec:

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

Itération sur les propriétés des objets

Si vous souhaitez itérer sur un objet plutôt qu'un tableau d'objets, cochez Comment itérer les clés d'objet en utilisant * ngFor

Pour mémoire, vous avez besoin d'un tuyau personnalisé:

@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]);
    }
}

Ce serait donc

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

Mettre à jour

Depuis Angular 6.1+, vous pouvez utiliser le KeyValuePipe natif.

https://blog.angular.io/angular-v6-1-now-available-TypeScript-2-9-scroll-positioning-and-more-9f1c03007bb6#ff4b

https://angular.io/api/common/KeyValuePipe

Pour mémoire:

<li *ngFor="let item of data | keyvalue; let i = index">
  {{i+1}}. {{item.key}} - {{item.value}}
</li>
29
aldo.roman.nurena

Démo 

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

Vous pouvez simplement imprimer la longueur du tableau des éléments.

7
Andrei Voicu