Informatique
Publié le 06/01/2017, rédigé par Chloé MAHALIN

Angular 4

Itérer sur une liste dans la vue

Créer une liste est d'autant plus facile avec Angular que la directive *ngFor permet d'itérer sur une liste.

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'selector'
    -
  templateUrl: './component.html'
    -
  styleUrls: ['./component.css']
})
export class MyComponent {

    myList: String[] = new Array<String>();

    constructor() {
        this.myList.push('ceci');
        this.myList.push('est');
        this.myList.push('une');
        this.myList.push('itération');
        this.myList.push('sur');
        this.myList.push('une');
        this.myList.push('liste');
    }

}

component.html

<ul>
    <li *ngFor="let text of myList">
      {{ text }}
    </li>
</ul>

Bien sur

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'selector'
    -
  templateUrl: './component.html'
    -
  styleUrls: ['./component.css']
})
export class MyComponent {

    myList: Entity[] = new Array<Entity>();

    constructor() {
        this.myList.push(new Entity());
    }

}

component.html

<ul>
    <li *ngFor="let entity of myList">
      {{ entity.getId() }}
    </li>
</ul>

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité