Gérez efficacement les événements et obtenez les données des éléments dans la boucle Angular/Ionic ngFor

Dans les applications angulaires/ioniques, lors de l'utilisation de la directive ngFor pour générer dynamiquement des éléments de liste, comment obtenir avec précision les données spécifiques de l'élément actuel (telles que la valeur de la zone de saisie ou les attributs de l'élément) et son index dans l'événement de clic est un défi courant. Cet article examinera trois solutions principales : utiliser des variables de référence de modèle pour transmettre directement les références d'éléments, utiliser ngModel pour la liaison de données bidirectionnelle afin de gérer les valeurs et utiliser document.getElementById pour les opérations DOM directes dans des scénarios spécifiques. Il fournira également des exemples de code correspondants et les meilleures pratiques pour aider les développeurs à créer une logique d'interaction robuste.

Défis liés à la gestion des événements dans ngFor

Dans la boucle ngFor d'Angular, nous devons souvent lier un événement (tel qu'un clic ou une entrée) à chaque élément itéré et obtenir les informations contextuelles de l'élément actuel lorsque l'événement est déclenché, telles que son index dans la liste, l'objet de données lié, ou plus précisément, la valeur ou l'attribut actuel d'un élément de formulaire (tel que ) à l'intérieur de l'élément. Essayer directement d'utiliser une expression d'interpolation ({{...}}) dans une expression de liaison d'événement pour créer dynamiquement un identifiant et accéder à sa valeur, telle que [{{'cant_' i}}].value, entraînera une erreur de syntaxe car l'expression de liaison d'événement attend en interne une expression JavaScript, pas une interpolation de modèle.

Pour résoudre ce problème, Angular fournit plusieurs mécanismes qui nous permettent d'y parvenir de manière déclarative et efficace.

Solution 1 : variables de référence du modèle

Les variables de référence de modèle sont l'un des moyens les plus directs et recommandés dans Angular pour référencer des éléments DOM ou des instances de composants dans des modèles. En définissant une variable sur un élément avec le préfixe #, vous pouvez référencer cet élément n'importe où dans le modèle, y compris dans les expressions de liaison d'événement. Lorsqu'il est utilisé conjointement avec ngFor, Angular crée intelligemment des portées de variables de référence de modèle distinctes pour chaque instance d'itération.

Comment référencer des variables à l'aide de modèles

1. Définir les variables de référence du modèle : ajoutez le nom de la variable préfixé par # à l'élément qui doit être référencé, tel que #cantID.
2. Passer en événement : Transmettez la variable directement à la fonction de gestionnaire d'événements en tant que paramètre.

Exemple de code :

 <ion-row l de lignes laisser i='index"'>
  <ion-col>
    <ligne-ion>
      <ion-col size="3" class="centered">
        <ion-item class="ion-no-padding">
          <!-- Définir la variable de référence du modèle #cantID -->
          <entr ionique type="numéro" id="{{ 'cant_' i }}" class="font_mini centré alignright" cantid.value></entr>ée-ion>
        </ion-item>
      </ion-col>
      <ion-col size="1" class="centered">
        <ion-case cocher id="{{ 'checkboxLine_' i }}" v item i cantid.value>
        <!-- Vous pouvez également transmettre directement la référence de l&#39;élément lui-même -->
        <!-- (click)="checkEvent($event, item, i, cantID)" -->
      </ion-case></ion-col>
    </ligne-ion>
  </ion-col>
</ion-row>

Dans l'exemple ci-dessus, #cantID fait référence à l'élément actuel. Dans les fonctions onChangeCantidad et checkEvent, nous pouvons obtenir directement la valeur de la zone de saisie via cantID.value. Si vous avez besoin d'accéder à d'autres propriétés ou méthodes de l'élément, vous pouvez transmettre le cantID lui-même directement à la méthode du composant.

Méthodes de traitement en composants :

 importer { Component, ElementRef } depuis '@angular/core' ;

@Composant({
  sélecteur : 'app-my-component',
  templateUrl : './mon-composant.page.html',
  styleUrls : ['./my-component.page.scss'],
})
classe d'exportation MyComponent {
  lignes : any[] = [
    { id : 1, nom : 'Produit A', quantité : 10 },
    { id : 2, nom : 'Produit B', quantité : 20 },
  ];

  onChangeCantidad(index : nombre, valeur : chaîne) {
    console.log(`Le numéro d'index ${index} a été remplacé par : ${value}`);
    // Mettre à jour le modèle de données correspondant this.lines[index].quantity = Number(value);
  }

  //Recevoir la valeur de l'élément en tant que paramètre checkEvent(event : any, item : any, index : number, inputValue : string) {
    console.log(
      `Événement de case à cocher : index ${index}, élément :`,
      article,
      `Valeur de la zone de saisie : ${inputValue}`
    );
    // ...autre logique}

  // Si passé, c'est la référence de l'élément lui-même (cantID)
  // checkEvent (événement : n'importe quel, élément : n'importe quel, index : numéro, el : HTMLInputElement) {
  // console.log(`Événement Checkbox : index ${index}, item:`, item);
  // console.log('Valeur de l'élément :', el.value);
  // console.log('Placeholder:', el.placeholder); // Accéder à d'autres propriétés // // ... autre logique // }

  // Si dans un environnement ionique, el peut être ElementRef
  // checkEvent (événement : any, item : any, index : number, el : ElementRef) {
  // console.log('Valeur de l'élément :', el.nativeElement.value);
  // console.log('Placeholder:', el.nativeElement.getAttribute('placeholder'));
  // }
}

Dans une méthode de composant, si une variable de référence de modèle (telle que cantID) est transmise directement, Angular l'analysera généralement dans le HTMLElement correspondant. Mais dans certains scénarios complexes ou frameworks spécifiques (tels que Ionic), il peut être encapsulé dans ElementRef, auquel cas vous devez accéder à l'élément DOM sous-jacent via la propriété .nativeElement.

Solution 2 : liaison de données bidirectionnelle ngModel

Pour les éléments de formulaire (tels que , , ), Angular recommande d'utiliser ngModel pour la liaison de données bidirectionnelle. Cela synchronise non seulement automatiquement la valeur de l'élément de formulaire avec le modèle de données du composant, mais simplifie également le processus d'obtention et de mise à jour de la valeur.

Utilisation de ngModel

1. Importer FormsModule : assurez-vous que votre module (généralement un AppModule ou un module de fonctionnalités) importe FormsModule.
2. Liez le modèle de données : utilisez [(ngModel)]="yourData[index].property" pour lier la valeur de l'élément de formulaire au modèle de données dans la boucle ngFor.

Exemple de code :

 <ion-row l de lignes laisser i='index"'>
  <ion-col>
    <ligne-ion>
      <ion-col size="3" class="centered">
        <ion-item class="ion-no-padding">
          <!-- Utilisez [(ngModel)] pour la liaison bidirectionnelle -->
          <entr ionique type="numéro" id="{{ 'cant_' i }}" class="font_mini centré alignright"></entr>ée-ion>
        </ion-item>
      </ion-col>
      <ion-col size="1" class="centered">
        <ion-case cocher id="{{ 'checkboxLine_' i }}" v i>
      </ion-case></ion-col>
    </ligne-ion>
  </ion-col>
</ion-row>

Méthodes de traitement en composants :

 importer { Component } depuis '@angular/core' ;

@Composant({
  sélecteur : 'app-my-component',
  templateUrl : './mon-composant.page.html',
  styleUrls : ['./my-component.page.scss'],
})
classe d'exportation MyComponent {
  lignes : any[] = [
    { id : 1, nom : 'Produit A', quantité : 10, isSelected : false },
    { identifiant : 2, nom : 'Produit B', quantité : 20, isSelected : false },
  ];

  onQuantityChange (index : nombre, nouvelle valeur : nombre) {
    console.log(`Le numéro d'index ${index} a été modifié via ngModel en : ${newValue}`);
    // item.quantity a été automatiquement mis à jour dans [(ngModel)] // Si un traitement supplémentaire est requis, cela peut être effectué ici}

  checkEvent (événement : n'importe quel, élément : n'importe quel, index : numéro) {
    console.log(
      `Événement de case à cocher : index ${index}, élément :`,
      article,
      `Quantité actuelle : ${item.quantity}`
    );
    item.isSelected = !item.isSelected; // Supposons qu'il existe un attribut isSelected // ... autre logique}
}

Traiter le problème de la valeur initiale non définie de ngModel

Parfois, lorsque la propriété du modèle de données liée par [(ngModel)] n'est pas définie lors de l'initialisation, cela peut provoquer un comportement inattendu. Une solution courante consiste à utiliser une combinaison de [ngModel] et (ngModelChange). Cela vous permet de contrôler plus précisément la logique de mise à jour des valeurs et garantit qu'il existe une valeur par défaut lors du chargement initial.

 <!-- Méthode de liaison ngModel améliorée pour gérer la situation initiale non définie -->
<entr ionique type="numéro"></entr>ée-ion>

 // exporte la classe MyComponent { dans le composant
  listCant : nombre[] = [10, 20] ; // Assurez-vous qu'il existe une valeur initiale onRepetitionChange(index: number, newValue: number) {
    this.listCant[index] = newValue;
    console.log(`La valeur de l'index ${index} a été mise à jour pour : ${newValue}`);
  }
}

De cette façon, vous vous assurez que listCant[i] a toujours une valeur et la mettez à jour manuellement dans l'événement ngModelChange.

Solution 3 : opération directe du DOM document.getElementById

Dans de rares cas, si les méthodes déclaratives ci-dessus fournies par Angular ne répondent pas à vos besoins (par exemple, vous devez accéder à certaines propriétés du DOM qu'Angular n'expose pas directement, ou gérer une intégration complexe de bibliothèques tierces), vous devrez peut-être recourir à la manipulation directe du DOM, en utilisant document.getElementById pour obtenir l'élément.

Exemple de code :

 importer { Component } depuis '@angular/core' ;

@Composant({
  sélecteur : 'app-my-component',
  templateUrl : './mon-composant.page.html',
  styleUrls : ['./my-component.page.scss'],
})
classe d'exportation MyComponent {
  lignes : any[] = [
    { id : 1, nom : 'Produit A', quantité : 10 },
    { id : 2, nom : 'Produit B', quantité : 20 },
  ];

  // Supposons que l'ID de la zone de saisie dans le modèle soit l'index 'cantidadLine_'
  checkEvent (événement : n'importe quel, élément : n'importe quel, index : numéro) {
    // Créer un identifiant dynamique
    const inputId = 'cant_' index;
    // Utilisez document.getElementById pour obtenir l'élément const element = document.getElementById(inputId) as HTMLInputElement;

    si (élément) {
      const inputValue = element.value;
      const placeholder = element.getAttribute('placeholder');
      console.log(
        `Obtenir l'opération DOM : index ${index}, valeur de la zone de saisie : ${inputValue}, espace réservé : ${placeholder}`
      );

      // Si vous avez besoin d'accéder à des éléments enfants, tels qu'une entrée dans ion-item // let parentElement = document.getElementById('cantidadLine_' index);
      // si (parentElement) {
      // laissez inputElement = parentElement.getElementsByTagName('input')(0];
      // si (inputElement) {
      // console.log('Valeur de la sous-zone de saisie :', inputElement.value);
      // }
      // }
    } autre {
      console.warn(`Élément avec l'ID ${inputId} introuvable`);
    }

    // ...autre logique}
}

Choses à noter :

• Évitez la surutilisation : la manipulation directe du DOM contourne la couche d'abstraction et le mécanisme de détection des modifications d'Angular, ce qui peut entraîner des problèmes de performances, un code difficile à tester et un comportement incompatible avec le cycle de vie d'Angular.
• Risque de sécurité : si du contenu est inséré via innerHTML, etc., il peut y avoir un risque d'attaques XSS.
• Mauvaise portabilité : le code qui repose directement sur la structure DOM est plus susceptible de rencontrer des problèmes lors de la mise à niveau du framework d'interface utilisateur ou de la bibliothèque de composants.
• Scénarios applicables : envisagez de l'utiliser uniquement dans un très petit nombre de scénarios spécifiques qui ne peuvent pas être résolus par l'approche déclarative d'Angular.

Meilleures pratiques et résumé

Lors de la gestion des événements et de la récupération des données d'éléments dans les boucles ngFor dans les applications angulaires/ioniques, les meilleures pratiques suivantes doivent être suivies :

1. Préférez utiliser ngModel pour la liaison des valeurs de formulaire : pour les scénarios qui nécessitent une liaison bidirectionnelle des valeurs des éléments de formulaire, [(ngModel)] est le premier choix. Il simplifie le flux de données et s'intègre parfaitement au module de formulaire d'Angular. Assurez-vous de gérer la valeur initiale des données liées à ngModel.
2. Utilisez des variables de référence de modèle pour obtenir des références ou des attributs d'éléments : lorsque vous devez accéder à des attributs sans valeur d'éléments (tels que l'espace réservé, le nom de classe) ou manipuler directement les instances d'éléments DOM, les variables de référence de modèle (#variableName) sont le meilleur choix. Il vous permet de référencer des éléments de manière déclarative dans des modèles et de les transmettre comme arguments aux méthodes des composants.
3. Utilisez la manipulation directe du DOM avec prudence : la manipulation directe du DOM telle que document.getElementById doit être utilisée en dernier recours. Cela réduira la maintenabilité et la testabilité du code et peut introduire des problèmes d'incompatibilité avec le framework Angular.
4. Transmettez toujours l'index et l'objet de données : Dans le traitement des événements de la boucle ngFor, il est généralement recommandé de transmettre l'index et l'objet élément actuel en même temps, afin que vous disposiez d'informations contextuelles complètes dans la méthode du composant afin de faciliter les mises à jour des données et le traitement de la logique métier.

En sélectionnant et en combinant rationnellement les méthodes ci-dessus, vous pouvez gérer efficacement et de manière robuste la logique d'interaction complexe de la boucle ngFor dans Angular/Ionic, garantissant la maintenabilité et les performances de l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!