Ich habe eine Reihe von Elementen, die ich unter bestimmten Bedingungen sichtbar machen möchte.
In AngularJS würde ich schreiben
<div ng-show="myVar">stuff</div>
Wie kann ich das in Angular 2+ machen?
angular
angular-components
angular-template
Mihai Răducanu
quelle
quelle
Antworten:
Binden Sie einfach an die
hidden
EigenschaftSiehe auch
Probleme
hidden
hat jedoch einige Probleme, da es zu Konflikten mit CSS für diedisplay
Eigenschaft kommen kann.Sehen Sie, wie
some
im Plunker-Beispiel nicht versteckt wird, weil es einen Stil hateinstellen. (Dies kann sich in anderen Browsern anders verhalten - ich habe mit Chrome 50 getestet.)
Problemumgehung
Sie können es beheben, indem Sie hinzufügen
Zu einem globalen Stil in
index.html
.eine weitere Falle
sind die gleichen wie
und zeigt das Element nicht an.
hidden="false"
weist die Zeichenfolge zu,"false"
die als wahr angesehen wird.Nur der Wert
false
oder das Entfernen des Attributs macht das Element tatsächlich sichtbar.Die Verwendung
{{}}
konvertiert auch den Ausdruck in eine Zeichenfolge und funktioniert nicht wie erwartet.Nur das Binden mit
[]
funktioniert wie erwartet, da diesfalse
alsfalse
anstelle von zugewiesen wird"false"
.*ngIf
vs.[hidden]
*ngIf
Entfernt effektiv seinen Inhalt aus dem DOM, während[hidden]
diedisplay
Eigenschaft geändert wird, und weist den Browser nur an, den Inhalt nicht anzuzeigen, aber das DOM enthält ihn weiterhin.quelle
*ngIf
In den meisten Fällen mag dies der richtige Weg sein, aber manchmal möchten Sie tatsächlich, dass ein Element visuell verborgen ist. Ein CSS-Stil mit[hidden]{display:none!important}
hilft. So stellt Bootstrap beispielsweise sicher, dass[hidden]
Elemente tatsächlich ausgeblendet werden. Siehe GitHubVerwenden Sie das
[hidden]
Attribut:Oder Sie können verwenden
*ngIf
Dies sind zwei Möglichkeiten, um ein Element ein- oder auszublenden. Der einzige Unterschied besteht darin
*ngIf
, dass das Element aus dem DOM entfernt[hidden]
wird, während der Browser angewiesen wird, ein Element mithilfe der CSS-display
Eigenschaft anzuzeigen / auszublenden, indem das Element im DOM belassen wird.quelle
async
Pipe verwenden, da das Abonnement für das Observable erst hinzugefügt wird, wenn die Bedingung erfüllt ist!Ich befinde mich in der gleichen Situation mit dem Unterschied, dass in meinem Fall das Element ein flexibler Container war. Wenn dies nicht Ihr Fall ist, könnte eine einfache Lösung sein
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
wo dann ist das CSS einfach wie
um dann den angezeigten Status zu verlassen, der von der Standardklasse behandelt wird.
quelle
invalid-feedback
Klasse.Entschuldigung, ich muss der Bindung an versteckt nicht zustimmen, was bei Verwendung von Angular 2 als unsicher angesehen wird. Dies liegt daran, dass der versteckte Stil beispielsweise mit einfach überschrieben werden kann
Der empfohlene Ansatz ist die Verwendung von * ngIf, was sicherer ist. Weitere Informationen finden Sie im offiziellen Angular-Blog. 5 Anfängerfehler, die mit Angular 2 zu vermeiden sind
quelle
*ngIf
ist dies eine schlechte Wahl. Sie haben jedoch Recht, dass die Konsequenzen berücksichtigt werden müssen, und es ist immer eine gute Idee, auf Fallstricke hinzuweisen.ngIf
genau, was diese Frage stellt. Ich möchte einige Inhalte auf einer Seite ausblenden, die a enthält<router-outlet>
. Wenn ich benutzengIf
, erhalte ich die Fehlermeldung, dass die Steckdose nicht gefunden werden kann. Ich muss die Steckdose ausblenden, bis meine Daten geladen sind, und nicht fehlen, bis meine Daten geladen sind.Wenn Sie der Meinung sind, dass der Stil "Keine anzeigen" ist, können Sie auch die Anweisung "ngStyle" verwenden und die Anzeige direkt ändern. Bei einem Bootstrap-DropDown ist die UL darauf so eingestellt, dass keine angezeigt wird.
Also habe ich ein Klickereignis zum "manuellen" Umschalten des UL erstellt, um es anzuzeigen
Dann habe ich für die Komponente showDropDown: bool-Attribut, das ich jedes Mal umschalte, und basierend auf int die displayDDL für den Stil wie folgt festgelegt
quelle
Gemäß der Angular 1-Dokumentation von ngShow und ngHide fügen beide Direktiven den CSS-Stil
display: none !important;
dem Element gemäß der Bedingung dieser Direktive hinzu (für ngShow wird das CSS für den falschen Wert hinzugefügt, und für ngHide wird das CSS für den wahren Wert hinzugefügt).Wir können dieses Verhalten mit der Angular 2-Direktive ngClass erreichen:
Beachten Sie, dass
show
wir für das Verhalten in Angular2!
(nicht) vor dem ngShowVal hinzufügen müssen und für dashide
Verhalten in Angular2 nicht!
(nicht) vor dem ngHideVal hinzufügen müssen.quelle
myExpression kann auf true oder false gesetzt sein
quelle
<div hidden="{{ myExpression }}">
Dies funktioniert nicht, da "myExpression" in eine Zeichenfolge konvertiert wird, die im HTML-Code gerendert wird. Sowohl die Zeichenfolge "wahr" als auch "falsch" sind wahr, daher wird sie immer verborgenWenn Sie Bootstrap verwenden, ist dies so einfach:
quelle
[hidden]
macht das gleiche, also empfehle ich[hidden]
in Bootstrap 4.0 die Klasse "d-none" = "display: none! important;"
quelle
Für alle anderen, die über dieses Problem stolpern, habe ich es so erreicht.
Ich habe verwendet,
'visibility'
weil ich den Platz, den das Element einnimmt, erhalten wollte. Wenn Sie dies nicht möchten, können Sie es einfach verwenden'display'
und auf einstellen'none'
.Sie können es dynamisch oder nicht dynamisch an Ihr HTML-Element binden.
oder
quelle
Verwenden Sie versteckt, wie Sie ein Modell mit Steuerelement binden und CSS dafür angeben :
HTML:
CSS:
quelle
Das hat bei mir funktioniert:
quelle
quelle
für mich
[hidden]=!var
hat noch nie funktioniert.Damit,
<div *ngIf="expression" style="display:none;">
Und
<div *ngIf="expression">
geben Sie immer die richtigen Ergebnisse.quelle
Es gibt zwei Beispiele für Angular-Dokumente: https://angular.io/guide/structural-directives#why-remove-rather-than-hide
Sie können [style.display] = "'block'" verwenden, um ngShow zu ersetzen, und [style.display] = "'none'", um ngHide zu ersetzen.
quelle
Der beste Weg, um dieses Problem zu lösen, indem Sie
ngIf
verhindern, dass dieses Element im Front-End gerendert wird.Wenn Sie
[hidden]="true"
hide verwenden oder stylen[style.display]
, wird das Element nur im Front-End ausgeblendet, und jemand kann den Wert ändern und leicht anzeigen. Meiner Meinung nach ist es am besten, das Element auszublendenngIf
und auch Wenn Sie mehrere Elemente haben (müssen auch andere implementieren), können Sie die
<ng-template>
Option verwendenBeispiel für einen ng-Template-Code
quelle
Wenn Sie nur die Symmetrics
hidden
/shown
Direktiven verwenden möchten, mit denen AngularJS geliefert wurde, empfehle ich, eine Attribut-Direktive zu schreiben, um die Vorlagen wie folgt zu vereinfachen (getestet mit Angular 7):Viele der anderen Lösungen sind korrekt. Sie sollten verwenden,
*ngIf
wo immer dies möglich ist. Bei Verwendung deshidden
Attributs können unerwartete Stile angewendet werden. Wenn Sie jedoch keine Komponenten für andere schreiben, wissen Sie wahrscheinlich, ob dies der Fall ist. Damit dieseshown
Direktive funktioniert, sollten Sie außerdem Folgendes hinzufügen:zu Ihren globalen Stilen irgendwo.
Mit diesen können Sie die Direktive wie folgt verwenden:
mit der symmetrischen (und entgegengesetzten) Version wie folgt:
Um die Schultern zu ergänzen, sollten Sie uns auch ein Präfix wie so
[acmeShown]
vs just geben[shown]
.Der Hauptgrund, warum ich eine
shown
Attributanweisung verwendet habe, ist die Konvertierung von AngularJS-Code in Angular -AND-, wenn der ausgeblendete Inhalt Containerkomponenten enthält, die XHR-Roundtrips verursachen. Der Grund, den ich nicht nur benutze,[hidden]="!myVar"
ist, dass es oft genug komplizierter ist wie:[hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.
[gezeigt] `ist einfach einfacher zu überlegen.quelle
Um die Schaltfläche div on ein- und auszublenden, klicken Sie in Winkel 6.
HTML Quelltext
Component .ts Code
Dies funktioniert für mich und es ist eine Möglichkeit, ng-hide und ng-show in angle6 zu ersetzen.
genießen...
Vielen Dank
quelle