|
Publié le 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, cela fonctionne également avec des objets plus complexes :

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>