Angular : comment retirer un item d'un tableau (array) stocké

Dans le langage TypeScript, on interagit avec les tableaux de la même manière qu'avec le langage JavaScript grâce à la classe Array. Pour supprimer un élément d'un tableau, il ne faut pas utiliser l'opérateur "delete" car il ne fonctionne pas avec les tableaux. Il faut faire appel à la méthode "splice()" de la classe Array.

L'opérateur "delete" est utilisé pour supprimer une propriété d'un objet. Alors que l'on serait tenté de l'utiliser également sur un tableau, cela ne fonctionnera pas. Il ne peut être appliqué qu'aux objets et aux propriétés configurables.

monTableau: Array<string> ["Voici", "mon, "beau", "tableau"];
delete monTableau[2];
console.log(monTableau) //Affiche Voici, mon, beau, tableau car l'opérateur delete ne fonctionne pas avec un tableau
var voiture = { 
   couleur: "rouge"
};
delete voiture.couleur
console.log(voiture.couleur) //Affiche undefined car la propriété a été supprimée

Pour supprimer un élément d'un tableau, vous devez faire appel à la méthode "splice()". Elle prend en paramètre l'index du premier élément que l'on souhaite supprimer.

monTableau.splice(2);
console.log(monTableau) //Affiche Voici, mon, tableau

On peut également préciser en deuxième paramètre le nombre d'éléments que l'on souhaite supprimer. Les paramètres suivants, optionnels, sont des éléments qui seront ajoutés à partir de l'index après la suppression.

monTableau.splice(2, 1, "très", "grand")
console.log(monTableau) //Affiche Voici, mon, très, grand, tableau

Si vous ne connaissez pas la position de l'élément dans le tableau, vous pouvez utiliser la méthode "indexOf()" pour le trouver. Vous devez cependant tester la valeur de retour de la fonction "indexOf()". Lorsqu'un élément n'a pas été trouvé, la méthode retourne "-1" et applique cette valeur à la méthode "splice()" qui va supprimer le dernier élément du tableau.

const index: number = monTableau.indexOf("beau");
if (index !== -1) {
    monTableau.splice(index, 1);
}
console.log(monTableau) //Affiche Voici, mon, tableau

Autour du même sujet

Angular : comment retirer un item d'un tableau (array) stocké
Angular : comment retirer un item d'un tableau (array) stocké

Dans le langage TypeScript, on interagit avec les tableaux de la même manière qu'avec le langage JavaScript grâce à la classe Array. Pour supprimer un élément d'un tableau, il ne faut pas utiliser l'opérateur "delete" car il ne fonctionne pas avec les...