web-dev-qa-db-fra.com

Quels types de boucle existent dans Angular 2?

Quels sont les types de boucles qui existent dans Angular 2?

Je n'ai trouvé que for et foreach, mais j'ai du mal à en trouver d'autres. Y a-t-il une liste quelque part?

Y a-t-il des exemples quelque part? Cela aiderait à comprendre très fortement.

[EDIT]: Ce que je recherche essentiellement, c’est une liste de tous les types de boucles différents dans Angular 2.

[EDIT 2]: Ce que je veux vraiment dire, ce sont les boucles spécifiques à Angular 2 dans la section template (désolé, je ne savais pas qu'il y avait autant de possibilités). Pour donner un exemple avec * ngFor:

<ul class="contacts">
  <li *ngFor="#contact of contacts"
      (click)="onSelectContact(contact)"
      [class.selectedContact]="contact === selectedContact">
    <span class="badge">{{contact.id}}</span> {{contact.name}}
  </li>
</ul>
loopsangular
6
Socrates

La seule directive de boucle de modèle dans Angular 2 est ngFor et ne fonctionne qu'avec des iterables, généralement des tableaux. (In Angular 1, ng-repeat fonctionnerait également avec des objets, mais Angular 2 ne fonctionnerait pas.)

Vous pouvez utiliser un pipe pour formater, filtrer, trier, etc. la liste avant de l'afficher.

4
Mark Rajcok

Vous pouvez utiliser la directive ngFor dans Angular 2 pour la lecture en boucle/itération. 

Comme ça 

<li *ngFor="#item of items; #i = index">...</li>

La documentation de cette directive est disponible ici https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Et un exemple de cela est fait dans les guides du développeur sur le site Web de Angular 2 https://angular.io/docs/ts/latest/guide/displaying-data.html#!#showing -an-array-property-with-ngfor

3
Steve Livingston

Angular 2 est un framework JavaScript. Les boucles pour JavaScript peuvent également fonctionner dans Angular 2. Voir ci-dessous l'utilisation de faire en plongeur 

http://plnkr.co/edit/s9hfAcdjW6QU0Abj8UqQ?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2> // Output Hello Angular2 0123456789

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 '
    this.testLoop();
  }

  testLoop(){
    var i = 0;
    do {
       this.name += i;
       i++;
    }
    while (i < 10);
  }
}
2
Code OverFlow

Pour live output click ...

Exemple,

<!doctype html>
<html>
<head>
    <title>ng for loop in angular 2 with ES5.</title>
    <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
    <script>
        var ngForLoop = function () {
            this.msg = "ng for loop in angular 2 with ES5.";
            this.users = ["Anil Singh", "Sunil Singh", "Sushil Singh", "Aradhya", 'Reena'];
        };

        ngForLoop.annotations = [
                new angular.Component({
                    selector: 'ngforloop'
                }),
                new angular.View({
                    template: '<H1>{{msg}}</H1>' +
                            '<p> User List : </p>' +
                            '<ul>' +
                            '<li *ng-for="#user of users">' +
                            '{{user}}' +
                            '</li>' +
                            '</ul>',
                    directives: [angular.NgFor]
                })
        ];

        document.addEventListener("DOMContentLoaded", function () {
            angular.bootstrap(ngForLoop);
        });
    </script>
</head>
<body>
    <ngforloop></ngforloop>
    <h2>
      <a href="http://www.code-sample.com/" target="_blank">For more detail...</a>
    </h2>
</body>
</html>
0
Anil Singh