Angular2: affichage conditionnel, liaison à la propriété [hidden] par rapport à la directive * ngIf
Dans Angular2, disons que je veux afficher conditionnellement un <div> bloquer. Quelle est la différence entre les deux manières suivantes.
<div [hidden]=isLoaded>Hello World!</div>oùisLoadedest un booléen dans.tsfichier.<div *ngIf=isLoaded>Hello World!</div>
Je sais que même si le <div> n'est pas affiché dans la page, 1. a toujours le <div> dans le DOM alors que 2. non. Y-a-t'il d'autres différences? Quels sont les avantages et les inconvénients de chacun d'eux?
La différence est que *ngIf supprime l’élément du DOM, tandis que [hidden] joue réellement avec le style CSS en définissant display:none. Cependant, le problème avec [hidden] _ est que cela peut être oublié, ainsi div, comme dans votre cas, serait affiché et vous vous seriez gratté la tête pourquoi cela ne fonctionnait pas.
Pour résumer, *ngIf et [hidden] sont pas identiques. Le premier supprime un élément de DOM, tandis que le second bascule la propriété display CSS.