In diesem Kapitel lernen wir, wie Sie Angular2 verwenden, um Daten anzuzeigen und wie die integrierten Anweisungen NgFor und NgIf verwendet werden
Stellen Sie zunächst sicher, dass Sie ein Angular2 -Beispielprogramm haben, das ausgeführt werden kann. Es ist am besten, das QuickStart Small Project zu sein, das wir im vorherigen Kapitel abgeschlossen haben, oder das QuickStart Small Project, das Sie gemäß den Schritten über der offiziellen Website abgeschlossen haben, da unsere Erklärungen auf dieser Grundlage basieren. Dann beginnen wir die folgende glückliche Reise.
Da unsere Artikelserie TypeScript verwendet, können Sie vor dem Lesen des folgenden Inhalts auch die Arten von TypeScript oder ES6 betrachten. Ihre URLs sind TypeScript und ES6. Wenn Sie ähnliche objektorientierte Sprachen wie Java oder C ++ gelernt haben, ist es hier leicht, die Klassen hier zu lernen. Die Klassen hier ähneln im Grunde genommen denen in diesen Sprachen.
Im vorherigen Abschnitt haben wir eine leere Klasse in app.component.ts exportiert, daher müssen wir damit beginnen, sie zu füllen, um sie voll zu machen. Zunächst fügen wir der AppComponent -Klasse (Komponente), Name, Alter, Obst; Genau wie die folgende:
Exportklasse AppComponent {userername = 'DreamApple'; Alter = 22; Frucht = 'Apfel'}Die obige Schreibmethode ist eigentlich nur eine Form der Abkürzung, aber die vollständige Schreibmethode sollte wie folgt sein:
Exportklasse AppComponent {// userername = 'DreamApple'; // Alter = 22; // fruit = 'Apple' Benutzername: String; Alter: Zahl; Frucht: Schnur; Constructor () {this.username = 'DreamApple'; this.age = 22; this.fruit = 'Apple'; }}Dann müssen wir unsere Vorlage ändern, da wir in der Vorlage mehr HTML verwenden müssen, damit wir Backticks verwenden müssen, um unsere HTML -Fragmente zu wickeln. Unsere Dekorateurfunktion lautet wie folgt:
@Component ({selektor: 'my-App', Vorlage: `<p> Mein Name ist: {{username}} </p> <p> Mein Alter ist: {{ast}} </p> <p> Meine Lieblingsfrucht ist: {{Frucht}}}}}))Natürlich können wir auch die Konfigurationsoptionen der Templateurl des Metadatenobjekts in der Dekorationsfunktion verwenden, wie unten gezeigt:
@Component ({Selector: 'my-App', // Vorlage: `// <p> Mein Name ist: {{{username}} </p> // <p> Mein Alter ist: {{älter}} </p> // <p> Meine Lieblingsfrucht ist: {{fruit}} </p>`, Templateurl: Templateurl: Templateurl: Templateurl: Templateurl: Templateurl: {{{fruit}} </p> // `, templateurl: {{{fruit}} </p>`, templateurl: templateurl: {oder 'App/Vorlagen/App-Template.html'})Unter ihnen repräsentiert App/Templates/App-Template.html die Datei App-Template.html im Ordner Vorlagen unter dem Stammverzeichnis des Programms (anstelle von Angular2-Travel) und kopiert dann das zuvor geschriebene HTML-Fragment.
Aus dem obigen Vorgang können wir sehen, dass Angular2 immer noch die von Angular1 verwendeten Doppelklammern verwendet. Es wird als Interpolationssymbol verwendet, bei dem das Interpolationssymbol angezeigt wird, die die Daten angezeigt werden, die wir anzeigen möchten. Als nächstes müssen wir lernen, die eingebaute Anweisung zu verwenden, die ngfor. Schüler, die mit Angular1 vertraut sind, sollten leicht mit dieser Anweisung beginnen, da NGFOR und NG-Repeat im Grunde genommen gleich sind. Es wird verwendet, um ein iterables Objekt zu schleifen, das im Allgemeinen ein Array ist.
Als nächstes fügen wir AppComponent ein weiteres Attribut Fruitslist hinzu, wie unten gezeigt:
Exportklasse AppComponent {userername = 'DreamApple'; Alter = 22; fruitList = ['Apple', 'orange', 'birne', 'banane']; fruit = this.fruitSlist [0]; // Verwenden Sie dies.fruitList [0]}Das, worauf wir achten müssen, ist der kommentierte Ort. Wir müssen dies verwenden. Wenn Fruitslist verwendet wird, weiß Angular nicht, was es darstellt.
Als nächstes werden wir dieses Fruchtarray durchlaufen und sehen, wie man es in der Vorlage darstellt.
@Component({ selector: 'my-app', template:` <p>My name is: {{username}}</p> <p>My age is: {{age}}</p> <ul> <li *ngFor="let fruit of fruitsList">{{fruit}}</li> </ul> <p>My favorite fruit is: {{fruit}} </p> `})Es gibt verschiedene Dinge, auf die im obigen Code beachtet werden muss. Zuerst haben wir *ngfor anstelle von ngfor verwendet. Das * hier kann nicht entfernt werden; Wenn es entfernt wird, meldet unser Programm keinen Fehler, aber wir werden nur das erste Element des Arrays ausgelöst. In Bezug auf den Grund, warum Sie *hinzufügen müssen *, können Sie sich hier im Detail die Vorlagensyntax ansehen. Natürlich können wir einige Operationen hinter dem Ausdruck schreiben, der uns helfen kann, jeden Index anzuzeigen, der wie folgt sein kann:
<li *ngfor = "Lassen Sie die Früchte von FruitsList; lass i = index;"> {{i}}-{{fruit}} </li>
Im obigen Vorlagencode sind einige Dinge zu beachten. Zunächst müssen Sie wissen, dass *ngfor von Ausdrücken folgt, damit wir einige einfache Ausdrücke schreiben können, um uns zu helfen, besser zu schließen. Wir verwenden auch LET-Keywords, fügen Blockebene hinzu und begrenzen diese Variablen in den *ngfor-Loop-Block. OK, wenn Sie mehr über *ngfor erfahren möchten, können Sie sich die offizielle API über NGFOR ansehen.
Die nächste Anweisung, die eingeführt wird, ist NGIF. Natürlich ähnelt diese Anweisung im Grunde genommen der NG-IF-Anweisung von Angular1. Entscheiden Sie, ob ein Element auf der DOM basierend auf dem Wert des folgenden Ausdrucks hinzugefügt oder entfernen soll.
Sehen Sie, wie wir diese Richtlinie in der Vorlage verwenden:
<p *ngif = "fruitslist.length> 3"> Die Länge der Fruitslist ist größer als 3 </p>
<p *ngif = "fruitSlist.length <= 3"> Die Länge der Fruitslist ist nicht größer als 3 </p>
Zunächst sollten wir darauf hinweisen, dass wir wie die Verwendung von *ngfor *ngif verwenden; Dann können wir einen Ausdruck nach *ngif schreiben, und das erwartete Rückgabeergebnis dieses Ausdrucks ist ein boolescher Wert; Anschließend entscheidet die *ngif -Anweisung, ob das Element, das sie auf der DOM steuert, basierend auf dem Wert dieses Ausdrucks hinzufügen oder entfernen soll.
Da wir TypeScript verwenden, können wir viele neue Funktionen verwenden, z. B. Klassen zum Erstellen von Instanzen. Als nächstes werden wir die Obstklasse verwenden, um unsere Obstinstanz zu bauen. Zuerst erstellen wir einen neuen Ordner im App -Ordner und dann eine fruit.ts -Datei, in der wir den Code der Obstklasse schreiben:
Klassenfrucht exportieren {Konstruktor (öffentlicher Name: String, öffentlicher Preis: Nummer) {}}Erklären wir den obigen Code. Wir verwenden den Konstruktor und deklarieren zwei Eigenschaften dieses Objekts im Konstruktor. Einer ist Name und der andere ist Preis. Wir verwenden den Namen: Zeichenfolge und Preis: Zahlenparameter im Konstruktor, um die Eigenschaften dieses Objekts zu erstellen und zu initialisieren. Als nächstes können wir diese Klasse in unserem Programm verwenden.
Stellen Sie zunächst diese Klasse in app.comPonent.ts ein:
import {fruit} aus './classes/fruits';
Verwenden Sie dann die Obstklasse in AppComponent, um unsere Obstliste zu initialisieren:
Exportklasse AppComponent {userername = 'DreamApple'; Alter = 22; fruitSlist = [New Fruit ('Apfel', 20), neue Früchte ('Orange', 30), neue Frucht ('Birne', 40), neue Früchte ('Banane', 50)]; // NoinSpection TypeScriptunResLesLedVariable fruit = this.fruitList [0] .Name; // Verwenden Sie dies.fruitList [0]}Dann müssen wir unsere Vorlage ändern:
Die Codekopie lautet wie folgt:
<li *ngfor = "Lassen Sie die Früchte von FruitsList; lass i = index;"> {{i}}-{{fruit.name}}-{{fruit.price}} </li>
Das Endergebnis sollte Folgendes sein:
Schließlich muss ich sagen, dass sowohl ES6 als auch Typenkript mich dazu bringen, Java zu schreiben. Dies ist auch ein Pro und Con. Der Vorteil besteht darin, dass es die Lesbarkeit des Codes erhöht, das Programm erleichtert und groß angelegte Projekte bequemer wird, was die Teamarbeit sehr bequem macht. Natürlich gibt es einige Mängel, die hauptsächlich die Lernkosten aller erhöhen. Natürlich freut sich alles.