Was ist äquivalent zu ngShow und ngHide in Angular?

Ich habe eine Reihe von Elementen, die ich unter bestimmten Bedingungen sehen möchte.

In AngularJS würde ich schreiben

stuff

Wie kann ich das in Angular tun?

    Einfach an die hidden Eigenschaft binden

     [hidden]="!myVar" 

    Siehe auch

    Probleme

    hidden hat jedoch einige Probleme, da es zu einem Konflikt mit CSS für die display .

    Sehen Sie, wie some im Plunker-Beispiel nicht versteckt werden, weil es einen Stil hat

     :host {display: block;} 

    einstellen. (Dies könnte sich in anderen Browsern anders verhalten – ich habe es mit Chrome 50 getestet)

    Problemumgehung

    Sie können es beheben, indem Sie hinzufügen

     [hidden] { display: none !important;} 

    Zu einem globalen Stil in index.html .

    eine weitere Falle

     hidden="false" hidden="{{false}}" hidden="{{isHidden}}" // isHidden = false; 

    sind die gleichen wie

     hidden="true" 

    und zeigt das Element nicht an.

    hidden="false" wird die Zeichenfolge "false" zuweisen, die als truthy gilt.
    Nur der Wert false oder das Entfernen des Attributs macht das Element tatsächlich sichtbar.

    Mit {{}} auch der Ausdruck in eine Zeichenfolge konvertiert und funktioniert nicht wie erwartet.

    Nur die Bindung mit [] wird wie erwartet funktionieren, da dieses false als false nicht als "false" zugewiesen wird.

    *ngIf vs [hidden]

    *ngIf entfernt seinen Inhalt effektiv aus dem DOM, während [hidden] die display ändert und den Browser nur anweist, den Inhalt nicht display aber das DOM enthält ihn immer noch.

     *ngIf="myVar" 

    ODER

     [hidden]="!myVar" 

    Dies sind zwei Möglichkeiten, Elemente ein- / auszublenden. Der einzige Unterschied zwischen *ngIf und [hidden] ist, dass *ngIf das Element aus dem DOM hinzufügt oder komplett entfernt, aber mit [hidden] zeigt / versteckt das Browser das Element mit der display von CSS und es bleibt im DOM.

    Entschuldigung, ich bin nicht einverstanden mit der Bindung an versteckt, die als unsicher bei der Verwendung von Angular 2 angesehen wird. Dies ist, weil der versteckte Stil leicht zum Beispiel mit Hilfe überschrieben werden könnte

     display: flex; 

    Der empfohlene Ansatz besteht darin, * ngIf zu verwenden, was sicherer ist. Weitere Informationen finden Sie im offiziellen Angular-Blog. 5 Rookie Fehler mit angular zu vermeiden 2

     
    Hello, there!

    Ich finde mich in der gleichen Situation mit dem Unterschied als in meinem Fall war das Element ein Flex-Container. Wenn es nicht Ihr Fall ist, könnte eine einfache Arbeit rum sein

     [style.display]="!isLoading ? 'block' : 'none'" 

    in meinem Fall aufgrund der Tatsache, dass viele Browser, die wir unterstützen, immer noch das Vendor-Präfix, um Probleme zu vermeiden, ging ich für eine andere einfache Lösung

     [class.is-loading]="isLoading" 

    wo dann das CSS einfach ist

     &.is-loading { display: none } 

    um dann den angezeigten Status zu verlassen, der von der Standardklasse behandelt wird.

    Wenn Ihr Fall ist, dass der Stil keine Anzeige ist, können Sie auch die ngStyle-Direktive verwenden und die Anzeige direkt ändern. Ich habe das für einen Bootstrap-DropDown gemacht, der UL ist darauf eingestellt, keine anzuzeigen.

    Also habe ich ein Klick-Ereignis für “manuell” gemacht, um den UL zur Anzeige zu schalten

      

    Dann auf der Komponente habe ich ShowDropDown: Bool-Attribut, das ich jedes Mal umschalten, und basierend auf Int, legen Sie die AnzeigeDDL für den Stil wie folgt

     showDropDown:boolean; displayddl:string; manualtoggle(){ this.showDropDown = !this.showDropDown; this.displayddl = this.showDropDown ? "inline" : "none"; } 

    Laut der Angular 1-Dokumentation von ngShow und ngHide fügt diese Direktive beide die css style- display: none !important; , zu dem Element gemäß der Bedingung dieser Direktive (für ngShow addiert das css auf falschem Wert, und für ngHide addiert das css für den wahren Wert).

    Wir können dieses Verhalten mit der Angular 2-Direktive ngClass erreichen:

     /* style.css */ .hide { display: none !important; }  
    I'm Angular1 ngShow...
    I'm Angular2 ngShow...
    I'm Angular1 ngHide...
    I'm Angular2 ngHide...

    Beachten Sie, dass wir für das show Verhalten in Angular2 hinzufügen müssen ! (nicht) vor dem ngShowVal, und für das hide in Angular2 müssen wir nicht hinzufügen ! (nicht) vor dem ngHideVal.

    Wenn Sie Bootstrap verwenden, ist so einfach:

     

    Verwenden Sie versteckt, wie Sie ein beliebiges Modell mit Kontrolle binden und css dafür angeben:

    HTML:

      

    CSS:

     [hidden] { display: none; } 
      

    MyExpression kann auf True oder False festgelegt werden

    in Bootstrap 4.0 die class “d-none” = “display: none! wichtig;”

     

    Für jeden, der über dieses Thema stolpert, habe ich es so erreicht.

     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'); } } } 

    Ich habe 'visibility' weil ich den von dem Element belegten Platz erhalten wollte. Wenn Sie dies nicht wünschen, können Sie einfach 'display' und auf 'none' ;

    Sie können es dynamisch an Ihr HTML-Element binden.

      

    oder

      

    Um div auf der Schaltfläche auszublenden und anzuzeigen, klicken Sie in eckig 6.

    HTML Quelltext

      
    Name Ram

    Komponente .ts Code

     @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent{ isShow=false; } 

    Das funktioniert für mich und es ist die Möglichkeit, ng-hide und ng-show in angular6 zu ersetzen.

    genießen…

    Vielen Dank