wake-up-neo.com

Was ist das Äquivalent von ngShow und ngHide in Angular 2+?

Ich habe eine Reihe von Elementen, die unter bestimmten Bedingungen sichtbar sein sollen.

In AngularJS würde ich schreiben

<div ng-show="myVar">stuff</div>

Wie kann ich das in Angular 2+ tun?

475
Mihai Răducanu

Binden Sie einfach an die Eigenschaft hidden

_[hidden]="!myVar"
_

Siehe auch

Probleme

hidden weist jedoch einige Probleme auf, da ein Konflikt mit CSS für die Eigenschaft display auftreten kann.

Sehen Sie, wie some in Plunker-Beispiel nicht ausgeblendet wird, weil es einen Stil hat

_:Host {display: block;}
_

einstellen. (Dies kann in anderen Browsern anders sein - ich habe es mit Chrome 50 getestet.)

Workaround

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"_ weist die Zeichenfolge _"false"_ zu, die als wahr angesehen wird.
Nur der Wert false oder das Entfernen des Attributs macht das Element tatsächlich sichtbar.

Wenn Sie _{{}}_ verwenden, wird der Ausdruck auch in eine Zeichenfolge konvertiert und funktioniert nicht wie erwartet.

Nur das Binden mit _[]_ funktioniert wie erwartet, da dieses false anstelle von _"false"_ als false zugewiesen wird.

*ngIf_ VS _[hidden]

_*ngIf_ entfernt seinen Inhalt effektiv aus dem DOM, während _[hidden]_ die Eigenschaft display ändert und nur den Browser anweist, den Inhalt nicht anzuzeigen, der DOM enthält ihn jedoch weiterhin.

811

Verwenden Sie das [hidden] -Attribut:

[hidden]="!myVar"

Oder Sie können *ngIf verwenden

*ngIf="myVar"

Dies sind zwei Möglichkeiten, ein Element anzuzeigen/auszublenden. Der einzige Unterschied ist: *ngIf entfernt das Element aus dem DOM, während [hidden] den Browser anweist, ein Element mit der CSS-Eigenschaft display anzuzeigen/auszublenden, indem das Element im DOM bleibt.

130
Ali Shahzad

Ich befinde mich in der gleichen Situation, mit dem Unterschied, dass das Element in meinem Fall ein flexibler Container war. Wenn dies nicht Ihr Fall ist, könnte eine einfache Lösung gefunden werden

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

in meinem Fall habe ich mich für eine andere einfache Lösung entschieden, da viele von uns unterstützte Browser immer noch das Herstellerpräfix benötigen, um Probleme zu vermeiden

[class.is-loading]="isLoading"

wo ist denn das CSS einfach so

&.is-loading { display: none } 

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

27
Vale Steve

Entschuldigung, ich bin nicht mit der Bindung an hidden einverstanden, die bei Verwendung von Angular 2 als unsicher angesehen wird

display: flex;

Der empfohlene Ansatz ist, * ngIf zu verwenden, was sicherer ist. Weitere Informationen finden Sie im offiziellen Angular Blog. 5 Anfängerfehler, die mit Angular 2 vermieden werden sollten

<div *ngIf="showGreeting">
   Hello, there!
</div>
25
Tim Hong

Gemäß der Angular 1-Dokumentation von ngShow und ngHide fügt diese Direktive dem Element den CSS-Stil display: none !important; hinzu Bedingung dieser Direktive (für ngShow wird die CSS für den falschen Wert hinzugefügt, und für ngHide wird die CSS für den wahren Wert hinzugefügt).

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

/* 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>

Beachten Sie, dass für show -Verhalten in Angular2 ! (nicht) vor dem ngShowVal hinzugefügt werden muss und für hide -Verhalten in Angular2 nicht müssen ! (nicht) vor dem ngHideVal hinzufügen.

4
Gil Epshtain

Wenn Ihr Fall ist, dass der Stil "Keiner" anzeigt, können Sie auch die ngStyle-Direktive verwenden und die Anzeige direkt ändern. Ich habe das für ein Dropdown-UL für bootstrap festgelegt, dass kein UL angezeigt wird.

Also habe ich ein Klickereignis erstellt, um die Anzeige des UL "manuell" umzuschalten

<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>    

Dann habe ich für die Komponente showDropDown: bool das Attribut, das ich jedes Mal umschalte, und basierend auf int setze die displayDDL für den Stil wie folgt

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

Wenn Sie verwenden, ist Bootstrap so einfach:

<div [class.hidden]="myBooleanValue"></div>
3

in bootstrap 4.0 zeigt die Klasse "d-none" = "none! important;"

<div [ngClass]="{'d-none': exp}"> </div>
3
63RMAN

Für alle anderen, die über dieses Problem gestolpert sind, 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' verwendet, weil ich den Platz, den das Element einnimmt, beibehalten wollte. Wenn Sie dies nicht möchten, können Sie einfach 'display' verwenden und es auf 'none' setzen.

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

<span hide="true"></span>

oder

<span [hide]="anyBooleanExpression"></span>
3
Anjil Dhamala

Verwenden Sie versteckt, wie Sie Modell mit control binden, und geben Sie CSS dafür an:

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS:

[hidden] {
   display: none;
}
<div [hidden]="flagValue">
---content---
</div>
1
Chirag
<div [hidden]="myExpression">

myExpression kann auf true oder false gesetzt werden

1
Niyaz

Es gibt zwei Beispiele für Angular Dokumente https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Eine Direktive könnte stattdessen den unerwünschten Absatz verbergen, indem sie den Anzeigestil auf none setzt.

<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>

Sie können [style.display] = "'block'" verwenden, um ngShow zu ersetzen, und [style.display] = "'none'", um ngHide zu ersetzen.

0
koo

Zum Ein- und Ausblenden der Div-Schaltfläche klicken Sie in angular 6.

HTML Quelltext

<button (click)=" isShow=!isShow">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf=" isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>

Komponenten-.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 eine Möglichkeit, ng-hide und ng-show in angular6 zu ersetzen.

genießen...

Vielen Dank

0
Manoj Gupta