3
votes

Condition angulaire * ngIf avec OU dans le composant HTML

J'essaie d'obtenir un * ngIf avec un OR mais la deuxième option est ignorée.

Voici le code:

<div *ngIf="router.url != '/one' || router.url != '/two'">
  show something
</div>

Comment puis-je obtenir cela travailler?

typescript angular angular7

3 commentaires

Le code que vous avez fourni semble correct. Vous pourriez fournir plus de détails?

vérifiez que la valeur de router.url est correcte. Qu'est-ce que le routeur? si son itinéraire activé, je pense que l'URL est observable.

Où avez-vous exactement ce div? Dans le composant qui est affiché sur le changement d'itinéraire ou sur le composant où vous avez le routeur-sortie?

5 Réponses :

0
votes

Exécutez ce code, peut-être qu'il expliquera quelque chose:

<p>Current URL: {{ router.url }}</p>
<p>Statement: router.url != '/one' - <strong>{{ router.url != '/one' }}</strong></p>
<p>Statement: router.url != '/two' - <strong>{{ router.url != '/two' }}</strong></p>
<p>Statement: router.url != '/one' || router.url != '/two' - <strong>{{ router.url != '/one' || router.url != '/two' }}</strong></p>
<div *ngIf="router.url != '/one' || router.url != '/two'">
  show something
</div>

0 commentaires

4
votes

Utilisation de router.url! = '/ one' || router.url! = '/ two' signifie:

If router.url != '/one' returns true

If router.url != '/two' returns true

La deuxième condition n'est jamais évaluée si la première condition est remplie car vous utilisez OR

p >

0 commentaires

2
votes

C'est exact que votre deuxième condition est ignorée, comme quand router.url! = '/ one' il satisfait déjà la condition et que la deuxième n'est jamais évaluée, essayez de cette façon

<div *ngIf="!(router.url == '/one' || router.url == '/two')">
  show something
</div>

0 commentaires

0
votes

Votre condition est toujours vraie, car elle vérifie si une valeur est différente de l'une ou de l'autre. La condition ne serait donc fausse que si router.url était en même temps égal à la fois à '/ one' et à '/ two' , ce qui est logiquement impossible.

0 commentaires

0
votes

Vérifiez vos valeurs pour vous assurer que le problème n'est pas lié à vos données et remplacez ! = par ! == .

Cependant, dans votre cas, je pensez que vous devriez utiliser et && , car avec un || , votre div apparaîtra puisque si votre itinéraire est / one ou / two la condition sera vraie.

Essayez ceci:

<div *ngIf="!(router.url === '/one' || router.url === '/two')">
  show something
</div>

Ce qui équivaut à:

<div *ngIf="router.url !== '/one' && router.url !== '/two'">
  show something
</div>

0 commentaires