Sommaire

Application ionic3-list_basic

1. Compte rendu d’exécution de l’application

L’application ionic3-list_basic va lister le contenu d’un tableau mémoire contenant les marques de voitures préférées de l’auteur. L’intérêt est uniquement de découvrir la technique de manipulation de listes, car il est fréquent que, dans les projets, on intervienne sur des listes « statiques ».

L’exécution de l’application donne ceci :

images/ch30_01.png

2. Analyse des scripts principaux

Il n’est pas utile pour les applications basées sur des listes de revenir sur les scripts config.xml, package.json, src/app/app.components.ts et src/app/app.modules.ts.

Ces scripts ont des contenus très semblables à ceux produits lors de la conception du squelette de l’application par l’instruction ionic start nom_application en ligne de commande. Seuls les commentaires habituels ont été ajoutés.

Script home.html

La section <ion-content> contient le code suivant :

<!-- Contenu de la page --> 
<ion-content> 
  
 <!-- Liste --> 
 <ion-list> 
   <!-- Bouton de sélection d’un élément dans la liste --> 
   <button 
     ion-item 
     *ngFor="let marque of marquesVoitures" 
     (click)="selectionMarque(marque)"> 
     {{ ...