Bing Lu
Angenommen, ich möchte in Angular2 a bedingt anzeigen <div> Block. Was ist der Unterschied zwischen den folgenden zwei Möglichkeiten.
<div [hidden]=isLoaded>Hello World!</div> wo isLoaded ist ein boolescher Wert in Entsprechung .ts Datei.
<div *ngIf=isLoaded>Hello World!</div>
Ich weiß das, auch wenn die <div> wird nicht in der Seite angezeigt, 1. hat noch die <div> im DOM, während 2. dies nicht tut. Gibt es weitere Unterschiede? Was sind die Vor- und Nachteile von jedem von ihnen?
Der Unterschied ist das *ngIf wird das Element aus dem DOM entfernen, während [hidden] spielt tatsächlich mit dem CSS-Stil durch die Einstellung display:none. Allerdings ist das Problem mit [hidden] ist, dass es so überiden werden kann divwie in Ihrem Fall, angezeigt und Sie würden sich am Kopf kratzen, warum es nicht funktioniert.
Um die Dinge zusammenzufassen, *ngIf und [hidden] sind nicht überhaupt das gleiche. Ersteres entfernt ein Element aus DOM, während letzteres umschaltet display CSS-Eigenschaft.
@BingLu Es bindet an verstecktes Attribut.
– Estus-Kolben
29. September 2016 um 19:45 Uhr
Es ist keine Klasse versteckt. Es ist ein Attribut, das die CSS-Anzeigeeigenschaft manipuliert.
– Huske
29. September 2016 um 19:46 Uhr
Wenn Sie hinzufügen [hidden] { display: none !important;} zu Ihrer CSS-Einstellung [hidden] sollte gut funktionieren. Siehe auch stackoverflow.com/questions/35578083/…
– Günter Zöchbauer
29. September 2016 um 20:14 Uhr
Kann man das sagen [hidden] ist schneller als *ngIf?
– Skorunka František
6. Oktober 2017 um 10:34 Uhr
@SkorunkaFrantišek nach meinem Verständnis eher das Gegenteil. [hidden] behält das/die Objekt(e) im DOM und nimmt somit Speicherplatz und auch andere Ressourcen in Anspruch, da Angular Änderungen an diesen Objekten weiterhin verfolgt, selbst wenn sie verborgen sind. Daher wäre es besonders bei großen Objektbäumen vorteilhaft, *ngIf zu verwenden. Das Hinzufügen/Entfernen aus dem DOM ist jedoch auch mit Rechenkosten verbunden. Man sollte wahrscheinlich beide Optionen mit z. B. jsPerf testen, wenn die Leistung im Vordergrund steht.
– Bass
6. Januar 2018 um 21:41 Uhr
Da Sie den Unterschied bereits kennen, was wollen Sie eigentlich wissen?
– Jonsharpe
29. September 2016 um 18:59 Uhr
das ist der Unterschied. Nehmen wir an, Sie haben ein Dropdown-Menü mit 100 Städten. => Ihre Liste wird angezeigt, sobald Sie auf das Dropdown-Menü klicken, da sie sich bereits im DOM befindet, während in anderen Fällen eine Städteliste im DOM erstellt und dann angezeigt wird, sodass sie in diesem Fall nach a erscheint gewisse Verzögerung. Hängt von Ihnen ab, wie Sie es verwenden möchten.
– Manisch
29. September 2016 um 19:04 Uhr
@jonrsharpe Ich bin mir nicht sicher, ob es andere Unterschiede gibt und möchte lernen, welcher Weg bevorzugt wird. Übrigens weiß ich auch nicht was [class.hidden]warum haben Sie es aus der Frage entfernt?
– Bing Lu
29. September 2016 um 19:13 Uhr
stackoverflow.com/questions/35578083/…
– Günter Zöchbauer
29. September 2016 um 20:15 Uhr
@GünterZöchbauer Ihre verlinkte Antwort ist genau das, wonach ich suche, danke ~
– Bing Lu
29. September 2016 um 21:21 Uhr