Angular 2 Grundkurs

ngFor

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video geht es darum, wie man komplexe Objekte in einer Komponente nutzt und sie mittels der strukturellen Direktive so oft auf die Bühne legt, bis alle Elemente eines Objektes dargestellt sind.
08:59

Transkript

NgFor ist eine strukturelle Direktive. Diese Direktive ermöglicht es euch, dass wenn ihr sie auf ein Element anwendet, dass dieses Element so oft auf die Bühne gelegt wird, wie es Elemente innerhalb einer Liste gibt. Es ist quasi ein Repeater, der es euch ermöglicht, durch eine Liste zu iterieren und jedes Mal für ein neues Listenelement dieses dom zu duplizieren und zu klonen. Wie das Ganze funktioniert, möchte ich euch sehr gerne einmal demonstrieren. Und ich habe jetzt als allerersten Schritt für uns solch eine Liste angelegt. Das Anlegen der Liste habe ich in einer externen Datei gemacht und hier habe ich zunächst ein Interface in TypeScript definiert. Das Interface, das ich hier definiere, dient eigentlich nur dafür, zu beschreiben, welche Elemente es innerhalb eines Objektes geben soll. Und anschließend habe ich hier über "export" eine Liste exportiert, mit dem Namen "UserData" und habe gesagt, dass diese Liste Elemente enthält, die vom Typ "IUserVO" sind. Was ich dann gemacht habe, ist dann diverse User hier anzulegen. Die User haben immer eine ID, einen Namen, eine Beschreibung der Position, eine Beschreibung der Mail, des Phones und ein Beschreibungstext allgemein. Jeder dieser User hat auch ein Bild. Das Bild habe ich in den "image"-Unterordner schon kopiert. Und das Bild ist zusammengesetzt aus der ID, gefolgt mit einem JPEG. Was ich also nun machen möchte, ist es dieses User-Objekt, dass ich auf die Bühne gelegt habe, wo momentan noch ein nettes Kätzchen drin ist, so oft zu wiederholen, dass alle Kollegen von netTrek einmal dargestellt werden. Um das zu realisieren, beginne ich jetzt damit, dass ich innerhalb von "app.component.ts" nicht mehr die Werte statisch hinterlege, wie wir es hier haben, sondern zunächst einmal damit beginne, dass ich die Userliste importiere. Ich kommentiere das also hier aus und sage, es wird eine Userliste geben, und diese Userliste ist von "IUserVO". Ein Array, das importiere ich mir über "userData". Anschließend werde ich auch noch sagen, es gib noch den ersten User vom Typ "IUserVO". Und das ist aus dem "userData"-Objekt das erste Element. Was ihr erkennen könnt, ist, dass WebStorm hier automatisch zu allen notwendigen Elementen imports hinzugefügt hat. Ihr seht, dass UserVO und userData aus der Datei "user.data" importiert worden sind. Jetzt, nachdem ich die User-Liste habe und das erste Element aus dieser Liste, kann ich dieses erste Element nun binden. Hierfür wechsle ich in das Applikationstemplate und da haben wir ja bislang immer so gearbeitet, dass wir den username direkt gebunden haben. Mit direkt gebunden meine ich lediglich, dass wir füher den username als Eigenschaft der AppComponent hatten. Jetzt ist die Eigenschaft "firstUser" ein Objekt und in dem Objekt gibt es die Eigenschaft "name", die genau das repräsentiert, was ich brauche, nämlich den Namen des Users. Als nächstes müssen wir jetzt noch dafür sorgen, dass wir das Bild referenzieren. Wenn wir das Bild referenzieren, machen wir das in der Form, dass wir sagen, dass wir die Eigenschaft "image" nun setzen wollen, indem wir sagen, es gibt einen "image"-Ordner. In dem "image"-Ordner schnappe dir vom "firstUser" die ID - das ist ja dieses Kürzel "us" und Co gewesen - und hänge da ".jpeg" hintendran. Ich mache also nichts anderes, als eine Zusammensetzung des Pfades, indem ich sage, im "image"-Ordner nimm dann anschließend einen dynamischen Ausdruck hier, indem du aus dem User-Objekt die ID nimmst. Nochmal zusammengesetzt: Denkt daran, die ID ist das "us", und was ich jetzt hier habe, ist "Image" als Pfad, "us" als Ausdruck, und ".jpeg", damit ich den vollständigen Pfad zu diesem Bild habe. Ihr werdet mir Recht geben, dass das etwas undankbar ist und wir werden gleich noch einen Weg finden müssen, wie wir komplexe Objekte übergeben wollen. Bevor wir jetzt aber damit weitermachen, lasst uns jetzt einfach mal das NgFor verwenden. Das NgFor ist eine strukturelle Direktive und denkt bitte daran, strukturelle Direktiven wenden wir in der Form an, dass wir mit einem Asterisk beginnen, das heißt, mit einem Sternzeichen. "*NgFor". Und das NgFor soll jetzt durch eine Liste iterieren. Denkt bitte daran: Die Liste hatten wir schon erzeugt, das war die "userList" hier. Also werden wir jetzt hier Folgendes machen. Wir werden für jedes aktuelle Element aus der Liste eine Variable über "let" definieren. Das heißt, der aktuelle User aus der Liste UserList. Damit wird dieses Template so oft auf die Bühne gelegt, wie es Elemente in der UserList gibt. Und das aktuelle Element wird in der Eigenschaft User gespeichert. Jetzt bin also in der Lage, hier ohne Probleme "user" durch "firstUser" zu ersetzen und habe automatisch eine Liste meiner gesamten User dann hinzugefügt. In dem Moment brauche ich auch "firstUsr" nicht mehr. Das kann ich jetzt löschen. Ihr werdet mir Recht geben, dass das ein sehr undankbares Szenario ist, wenn ich die Elemente hier alle einzeln übergebe. Ich bin natürlich auch in der Lage, hier so zu arbeiten, dass ich innerhalb der UserComponent nochmal eine Modifikation vornehme, indem ich jetzt hier das mal auskommentiere. Und dann anschließend dafür sorge, dass ich über "input" "user" ein User-Objekt übergebe. Und dieses User-Objekt soll entsprechend vom Typ "IUserVO" sein. Und dann möchte ich in der Lage sein, dass ich hier entsprechend statt "username" "user.name" definiere. Statt "imageUrl"... Damit ich mich jetzt nicht vertippe, klaue ich mir das hier. Großartig. Dadurch, dass ich die geschweiften Klammern für den Ausdruck brauche, werde ich "user" normal übergeben und nicht als Attribut-Schreibweise, so wie wir es bisher gemacht haben. Perfekt. Jetzt müssen wir nur noch hier dafür sorgen, dass wir die description hier übergeben. Und zwar ist das dann "this.user.decription". Das sieht schon sehr gut aus. Noch ein Hinweis: "emit" kann jetzt nicht mehr "username" übergeben, sondern muss jetzt an der Stelle natürlich das komplexe Objekt übergeben, also ein "IUserVO". Und damit kann ich dann auch schon "user" übergeben. Super. Jetzt gibt es noch eine Stelle, an der ich dieses Event auch abfange. Das ist in der AppComponent gewesen. Hier seht ihr den "select user". Das ist dann hier "selectedUsr" vom Typ "IUserVO". Und das lass ich mir hier entsprechend auch nochmal ausgeben. Das sieht schon alles sehr gut aus. Muss jetzt im Grunde genommen nur noch für Folgendes sorgen. Über "Input" hole ich mir "userObject" und dieses "userObject" will ich mir jetzt entsprechend durchreichen lassen, also werde ich jetzt hier innerhalb der Komponente nur noch Folgendes machen: Ich werde "userObject" definieren als aktuellen User. Und muss mir den ganzen Stress dann mit den einzelnen Werten gar nicht mehr tun. Und habe dann automatisch die jeweiligen Elemente hier übergeben. Momentan habe ich noch das Problem, dass kein Bild angezeigt wird. Ich glaube ich weiß auch schon warum. Und zwar habe ich ja noch ein NgIf hier drin gehabt, das auf "imageUser" dann entsprechend verweist, das macht natürlich keinen Sinn mehr. Ich muss das jetzt auf "usr.id" verweisen lassen. Und speichere ich das dann nochmal, funktioniert das dann hervorragend auch mit dem Objekt. Fehlt eigentlich jetzt nur noch der Beweis, dass wenn ich jetzt hier auf Select klicke, dass ich dann entsprechend von dem jeweiligen Objekt Informationen bekomme. Und hier mache ich schnell die Konsole auf und da seht ihr, dass ich dann tatsächlich genau das Objekt dann hier als Information zurückbekomme. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, komplexe Objekte innerhalb von NgFor zu nutzen.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!