À l'intérieur d'une boucle * ngFor, je veux qu'un élément HTML s'affiche de manière aléatoire ... 50/50 chance.
Voici ce que je pensais fonctionner:
BookingPageComponent.html:139 ERROR TypeError: Cannot read property 'random' of undefined
Mais j'obtiens une erreur:
<span *ngIf="Math.random() < 0.5">test</span>
Qu'est-ce que je fais de mal et comment dois-je le faire correctement?
Merci!
p>
3 Réponses :
La classe
Math n'est pas disponible sur les expressions évaluées, mais est disponible dans votre classe de composant.
Vous pouvez donc créer une méthode:
<span *ngIf="showRandomly (0.5)">test</span>
Ensuite, utilisez-le dans votre ngIf:
public showRandomly(bias) {
return Math.rand() < bias;
}
Notez que cet aléatoire exécutera chaque rafraîchissement de vue et pourrait ne pas vous donner le résultat attendu.
Cela fonctionne mais j'obtiens des erreurs de console: ExpressionChangedAfterItHasBeenCheckedError .... sinon exactement ce dont j'avais besoin, merci!
Cela ne se produira pas en production, ce ne sera pas un problème. Les valeurs de vérification angulaire changent deux fois lors du développement pour vérifier les changements en dehors de la détection des changements, mais ce n'est pas ce qui se passe ici, juste un faux positif.
Si vous voulez toujours éviter cela, vous pouvez mettre en cache la valeur aléatoire sur une propriété et éviter cela. Cela changera également le comportement: le code actuel sera aléatoire chaque changement se produisant sur n'importe quel composant, par exemple si un champ d'entrée est tapé. En le mettant en cache, l'aléatoire sera exécuté une fois.
vous ne pouvez pas l'exécuter dans le modèle. Vous pouvez appeler une fonction de votre composant qui appelle Math.Random
exemple:
test
dans votre composant:
randomMath () {return Math.random ()}
La classe mathématique n'est pas disponible nativement sur l'expression mais vous pouvez faire comme ça dans votre fichier TS: écrivez simplement
Math: Math = Math;
et vous gardez votre template
ifVisible(): boolean{
return Math.random() < 0.5;
}
Mais il est recommandé d'ajouter une nouvelle fonction comme ci-dessous:
<span *ngIf="isVisible()">test</span>
Dans votre fichier TS:
<span *ngIf="Math.random() < 0.5">test</span>