J'ai un certain nombre d'éléments que je veux être visible sous certaines conditions.
Dans AngularJS j'écrirais
<div ng-show="myVar">stuff</div>
Comment puis-je faire cela dans Angular 2+?
J'ai un certain nombre d'éléments que je veux être visible sous certaines conditions.
Dans AngularJS j'écrirais
<div ng-show="myVar">stuff</div>
Comment puis-je faire cela dans Angular 2+?
Réponses:
Liez simplement à la hidden
propriété
[hidden]="!myVar"
Voir également
problèmes
hidden
a quelques problèmes, car il peut entrer en conflit avec CSS pour la display
propriété.
Voyez comment some
dans l' exemple de Plunker ne se cache pas parce qu'il a un style
:host {display: block;}
ensemble. (Cela pourrait se comporter différemment dans d'autres navigateurs - j'ai testé avec Chrome 50)
solution de contournement
Vous pouvez le corriger en ajoutant
[hidden] { display: none !important;}
Pour un style global dans index.html
.
un autre écueil
hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;
sont les mêmes que
hidden="true"
et ne montrera pas l'élément.
hidden="false"
affectera la chaîne "false"
considérée comme véridique.
Seule la valeur false
ou la suppression de l'attribut rendra l'élément visible.
L'utilisation {{}}
convertit également l'expression en chaîne et ne fonctionnera pas comme prévu.
Seule la liaison avec []
fonctionnera comme prévu car elle false
est affectée comme false
au lieu de "false"
.
*ngIf
contre [hidden]
*ngIf
supprime efficacement son contenu du DOM tout en [hidden]
modifiant la display
propriété et demande uniquement au navigateur de ne pas afficher le contenu mais le DOM le contient toujours.
*ngIf
peut être la bonne façon dans la plupart des cas, mais parfois vous voulez réellement qu'un élément soit là, visuellement caché. Un style CSS avec [hidden]{display:none!important}
aide. C'est, par exemple, comment Bootstrap s'assure que les [hidden]
éléments sont réellement cachés. Voir GitHub
Utilisez l' [hidden]
attribut:
[hidden]="!myVar"
Ou vous pouvez utiliser *ngIf
*ngIf="myVar"
Ce sont deux façons d'afficher / masquer un élément. La seule différence est: *ngIf
supprimera l'élément du DOM tandis que [hidden]
dira au navigateur d'afficher / masquer un élément en utilisant la display
propriété CSS en gardant l'élément dans DOM.
async
pipe, car l'abonnement à l'observable ne sera ajouté qu'après que la condition devienne vraie!
Je me retrouve dans la même situation avec la différence que dans mon cas, l'élément était un conteneur flexible.Si ce n'est pas votre cas, un travail facile pourrait être
[style.display]="!isLoading ? 'block' : 'none'"
dans mon cas, car de nombreux navigateurs que nous prenons en charge ont encore besoin du préfixe du fournisseur pour éviter les problèmes, j'ai opté pour une autre solution simple
[class.is-loading]="isLoading"
où le CSS est aussi simple que
&.is-loading { display: none }
pour laisser ensuite l'état affiché géré par la classe par défaut.
invalid-feedback
classe bootstrap 4 .
Désolé, je ne suis pas d'accord avec la liaison à masqué, ce qui est considéré comme dangereux lors de l'utilisation d'Angular 2. En effet, le style masqué peut être facilement remplacé, par exemple en utilisant
display: flex;
L'approche recommandée consiste à utiliser * ngIf qui est plus sûr. Pour plus de détails, veuillez vous référer au blog officiel Angular. 5 erreurs de recrue à éviter avec Angular 2
<div *ngIf="showGreeting">
Hello, there!
</div>
*ngIf
c'est un mauvais choix. Mais vous avez raison de considérer les conséquences et de signaler les pièges est toujours une bonne idée.
ngIf
réponde exactement à ce que cette question demande. Je souhaite masquer du contenu sur une page contenant un fichier <router-outlet>
. Si j'utilise ngIf
, j'obtiens une erreur indiquant qu'il ne trouve pas la prise. J'ai besoin que la prise soit cachée jusqu'à ce que mes données soient chargées, pas absente jusqu'à ce que mes données se chargent.
Si votre cas est que le style est afficher aucun, vous pouvez également utiliser la directive ngStyle et modifier directement l'affichage, je l'ai fait pour un BootDrap DropDown l'UL dessus est réglé pour afficher aucun.
J'ai donc créé un événement de clic pour basculer "manuellement" l'UL à afficher
<div class="dropdown">
<button class="btn btn-default" (click)="manualtoggle()" id="dropdownMenu1" >
Seleccione una Ubicación
<span class="caret"></span>
</button>
<ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
<li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>
</ul>
</div>
Ensuite, sur le composant, j'ai l'attribut showDropDown: bool que je bascule à chaque fois, et en fonction de int, définissez le displayDDL pour le style comme suit
showDropDown:boolean;
displayddl:string;
manualtoggle(){
this.showDropDown = !this.showDropDown;
this.displayddl = this.showDropDown ? "inline" : "none";
}
Selon la documentation Angular 1 de ngShow et ngHide , ces deux directives ajoutent le style css display: none !important;
à l'élément en fonction de la condition de cette directive (pour ngShow ajoute le css sur une valeur fausse et pour ngHide ajoute le css pour la valeur vraie).
Nous pouvons obtenir ce comportement en utilisant la directive Angular 2 ngClass:
/* style.css */
.hide
{
display: none !important;
}
<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>
<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>
<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>
<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>
Notez que pour le show
comportement dans Angular2, nous devons ajouter !
(pas) avant le ngShowVal, et pour le hide
comportement dans Angular2, nous n'avons pas besoin d'ajouter !
(pas) avant le ngHideVal.
<div [hidden]="myExpression">
myExpression peut être définie sur true ou false
<div hidden="{{ myExpression }}">
Cela ne fonctionnera pas, car "myExpression" sera converti en une chaîne à rendre en html. Les chaînes "true" et "false" sont véridiques, elles seront donc toujours cachées
Si vous utilisez Bootstrap, c'est aussi simple que cela:
<div [class.hidden]="myBooleanValue"></div>
[hidden]
fait la même chose, donc je recommande[hidden]
Pour quiconque tombe sur ce problème, c'est comme ça que je l'ai fait.
import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";
@Directive({
selector: '[hide]'
})
export class HideDirective implements OnChanges {
@Input() hide: boolean;
constructor(private renderer: Renderer2, private elRef: ElementRef) {}
ngOnChanges() {
if (this.hide) {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
} else {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
}
}
}
J'ai utilisé 'visibility'
parce que je voulais conserver l'espace occupé par l'élément. Si vous ne le souhaitez pas, vous pouvez simplement l'utiliser 'display'
et le régler sur 'none'
;
Vous pouvez le lier à votre élément html, dynamiquement ou non.
<span hide="true"></span>
ou
<span [hide]="anyBooleanExpression"></span>
Utilisez caché comme vous liez n'importe quel modèle avec contrôle et spécifiez css pour cela:
HTML:
<input type="button" class="view form-control" value="View" [hidden]="true" />
CSS:
[hidden] {
display: none;
}
pour moi, [hidden]=!var
n'a jamais fonctionné.
Donc, <div *ngIf="expression" style="display:none;">
Et, <div *ngIf="expression">
donnez toujours des résultats corrects.
Il existe deux exemples sur les documents angulaires https://angular.io/guide/structural-directives#why-remove-rather-than-hide
Une directive pourrait masquer le paragraphe indésirable à la place en définissant son style d'affichage sur aucun.
<p [style.display]="'block'">
Expression sets display to "block".
This paragraph is visible.
</p>
<p [style.display]="'none'">
Expression sets display to "none".
This paragraph is hidden but still in the DOM.
</p>
Vous pouvez utiliser [style.display] = "'block'" pour remplacer ngShow et [style.display] = "'none'" pour remplacer ngHide.
Meilleure façon de résoudre ce problème en utilisant ngIf
Parce que cela empêche bien d'obtenir le rendu de cet élément en front-end,
Si vous utilisez [hidden]="true"
ou style masquer, [style.display]
il ne masquera l'élément dans le front-end et quelqu'un peut changer la valeur et la voir facilement, à mon avis, la meilleure façon de masquer l'élément estngIf
<div *ngIf="myVar">stuff</div>
et aussi Si vous avez plusieurs éléments (besoin d'implémenter autre chose aussi) vous pouvez utiliser l' <ng-template>
option
<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
<div>loadMenu</div>
</ng-template>
<ng-template #loadAdmin>
<div>loadAdmin</div>
</ng-template>
Si vous souhaitez simplement utiliser les directives symétriques hidden
/ shown
fournies avec AngularJS, je suggère d'écrire une directive d'attribut pour simplifier les modèles comme cela (testé avec Angular 7):
import { Directive, Input, HostBinding } from '@angular/core';
@Directive({ selector: '[shown]' })
export class ShownDirective {
@Input() public shown: boolean;
@HostBinding('attr.hidden')
public get attrHidden(): string | null {
return this.shown ? null : 'hidden';
}
}
De nombreuses autres solutions sont correctes. Vous devez utiliser *ngIf
lorsque cela est possible. L'utilisation de l' hidden
attribut peut avoir des styles inattendus appliqués, mais sauf si vous écrivez des composants pour d'autres, vous savez probablement si c'est le cas. Donc, pour que cette shown
directive fonctionne, vous devez également vous assurer que vous ajoutez:
[hidden]: {
display: none !important;
}
à vos styles globaux quelque part.
Avec ceux-ci, vous pouvez utiliser la directive comme suit:
<div [shown]="myVar">stuff</div>
avec la version symétrique (et opposée) comme ceci:
<div [hidden]="myVar">stuff</div>
Pour ajouter aux épaules - vous devriez également nous utiliser un préfixe comme si [acmeShown]
vs vs juste [shown]
.
La principale raison pour laquelle j'ai utilisé une shown
directive d'attribut est pour convertir le code AngularJS en Angular -AND- lorsque le contenu qui est masqué contient des composants de conteneur qui provoquent des allers-retours XHR. La raison pour laquelle je ne me contente pas d'utiliser [hidden]="!myVar"
est que, souvent, c'est plus compliqué comme: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.
[montré] `est simplement plus facile à penser.
Pour masquer et afficher le bouton div sur, cliquez sur angulaire 6.
Code HTML
<button (click)=" isShow=!isShow">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf=" isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>
Composant .ts Code
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
isShow=false;
}
cela fonctionne pour moi et c'est un moyen de remplacer ng-hide et ng-show dans angular6.
prendre plaisir...
Merci