Dans ce chapitre, nous apprendrons à utiliser Angular2 pour afficher les données et à utiliser ses instructions intégrées NgFor et NgIf
Tout d'abord, assurez-vous d'avoir un échantillon Angular2 qui peut être exécuté. Il est préférable d'être le petit projet QuickStart que nous avons réalisé dans le chapitre précédent ou le petit projet QuickStart que vous avez achevé en fonction des étapes ci-dessus du site officiel, car nos explications sont basées sur cette base; Ensuite, commençons le joie heureux suivant.
Étant donné que notre série d'articles utilise TypeScript , avant de lire le contenu suivant, vous pourriez aussi bien regarder les types de TypeScript ou ES6. Leurs URL sont dactylographiées et ES6. Si vous avez appris des langues orientées objet similaires telles que Java ou C ++ auparavant, il sera facile d'apprendre les classes ici; Les cours ici sont fondamentalement similaires à ceux de ces langues.
Dans la section précédente, nous avons exporté une classe vide dans app.component.ts , nous devons donc commencer à le remplir pour le rassasier. Tout d'abord, nous ajoutons trois attributs à la classe AppComponent (composant), nom, âge, fruit; Tout comme ce qui suit:
classe d'exportation AppComponent {username = 'dreamApple'; âge = 22; fruit = 'pomme'}La méthode d'écriture ci-dessus n'est en fait qu'une forme d'abréviation, mais la méthode d'écriture complète doit être la suivante:
classe d'exportation AppComponent {// userName = 'DreamApple'; // âge = 22; // fruit = nom d'utilisateur «Apple»: chaîne; Âge: nombre; Fruit: String; Constructor () {this.Username = 'DreamApple'; this.age = 22; this.fruit = 'Apple'; }}Ensuite, nous devons modifier notre modèle, car nous devons utiliser plus de HTML dans le modèle, nous devons donc utiliser des backticks pour envelopper nos fragments HTML; Notre fonction de décorateur est la suivante:
@Component ({sélecteur: 'my-app', modèle: `<p> mon nom est: {{nom d'utilisateur}} </p> <p> mon âge est: {{}}} </p> <p> mon fruit préféré est: {{fruit}} </p>`})Bien sûr, nous pouvons également utiliser les options de configuration de TemplateUrl de l'objet de métadonnées dans la fonction décoratrice, comme indiqué ci-dessous:
@Component ({sélecteur: 'my-app', // modèle: `// <p> mon nom est: {{{nom d'utilisateur}} </p> // <p> mon âge est: {{Âge}} </p> // <p> mon fruit préféré est: {{fruit}} </p> //`, templateurl: 'app / modèles / app-timplate.html'})Parmi eux, App / Templates / App-Template.html représente le fichier App-Template.html dans le dossier Templates sous le répertoire racine du programme (plutôt que Angular2 Travel), puis copier le fragment HTML que nous avons écrit auparavant.
D'après le processus ci-dessus, nous pouvons voir qu'Angular2 utilise toujours les doublures utilisées par Angular1; Il est utilisé comme symbole d'interpolation, où le symbole d'interpolation apparaît est les données que nous voulons afficher. Ensuite, nous devons apprendre à utiliser l'instruction intégrée ngfor. Les élèves qui connaissent Angular1 devraient facilement commencer avec cette instruction, car Ngfor et Ng-Repeat sont essentiellement les mêmes; Il est utilisé pour faire boucle un objet itérable, qui est généralement un tableau.
Ensuite, nous ajoutons un autre attribut FruitsList à AppComponent, comme indiqué ci-dessous:
classe d'exportation AppComponent {username = 'dreamApple'; âge = 22; FruitsList = [«Apple», «Orange», «Pear», «banane»]; fruit = this.fruitsList [0]; // Utilisez ce.fruitsList [0]}La chose à laquelle nous devons prêter attention, c'est l'endroit commenté. Nous devons l'utiliser. Si FruitsList est utilisé, Angular ne saura pas ce qu'elle représente.
Ensuite, nous allons traverser ce tableau de fruits et voir comment le représenter dans le modèle.
@Component ({Selector: 'My-App', modèle: `<p> mon nom est: {{{nom d'utilisateur}} </p> <p> mon âge est: {{}}} </p> <ul> <li * ngfor =" Laissez Fruit of FruitsList "> {{fruit}} </li> </ul> <p> {{fruit}} </p> `})Il y a plusieurs choses auxquelles il faut faire attention dans le code ci-dessus. Tout d'abord, nous avons utilisé * ngfor au lieu de ngfor. Le * ici ne peut pas être supprimé; S'il est supprimé, notre programme ne rapportera pas d'erreur, mais nous ne bouclera que le premier élément du tableau. En ce qui concerne les raisons pour lesquelles vous devez ajouter *, vous pouvez jeter un œil à la syntaxe du modèle ici en détail; Bien sûr, nous pouvons rédiger des opérations derrière l'expression * ngfor qui peut nous aider à montrer chaque index, ce qui peut être comme ce qui suit:
<li * ngfor = "Soit Fruit of FruitsList; Soit i = index;"> {{i}} - {{fruit}} </li>
Il y a certaines choses à noter dans le code de modèle ci-dessus. Tout d'abord, vous devez savoir que * ngfor est suivi par des expressions, afin que nous puissions écrire des expressions simples pour nous aider à mieux faire boucle; Nous utilisons également des mots clés, ajoutez la portée au niveau du bloc et limitons ces variables au bloc de boucle * ngfor. OK, si vous voulez en savoir plus sur * ngfor, vous pouvez jeter un œil à l'API officielle sur NGFOR.
L'instruction suivante à présenter est NGIF. Bien sûr, cette instruction est fondamentalement similaire à l'instruction NG-IF d'Angular1. Décidez d'ajouter ou de supprimer un élément sur le DOM en fonction de la valeur de l'expression suivante.
Voyez comment nous utilisons cette directive dans le modèle:
<p * ngif = "FruitsList.length> 3"> La longueur de Fruitslist est supérieure à 3 </p>
<p * ngif = "FruitsList.length <= 3"> La longueur de Fruitslist n'est pas supérieure à 3 </p>
Tout d'abord, nous devons souligner que, comme en utilisant * ngFor, nous utilisons * ngif; Ensuite, nous pouvons écrire une expression après * ngif, et le résultat de retour attendu de cette expression est une valeur booléenne; Ensuite, la directive * ngif décidera d'ajouter ou de supprimer l'élément qu'il contrôle sur le DOM en fonction de la valeur de cette expression.
Puisque nous utilisons TypeScript, nous pouvons utiliser de nombreuses nouvelles fonctionnalités, telles que l'utilisation de classes pour créer des instances; Ensuite, nous utiliserons la classe de fruits pour construire notre instance de fruits. Tout d'abord, nous créons un nouveau dossier dans le dossier de l'application, puis nous créons un fichier fruit.ts, où nous écrivons le code de la classe de fruits:
Fruit de classe d'exportation {Constructeur (nom public: chaîne, prix public: numéro) {}}Expliquons le code ci-dessus. Nous utilisons le constructeur et déclarons deux propriétés de cet objet dans le constructeur; L'un est le nom et l'autre est le prix. Nous utilisons le nom: String et Price: Numéro Paramètres dans le constructeur pour créer et initialiser les propriétés de cet objet. Ensuite, nous pouvons utiliser cette classe dans notre programme;
Tout d'abord, introduisez cette classe dans App.
import {fruit} de './classes/fruits';
Ensuite, utilisez la classe de fruits dans AppComponent pour initialiser notre liste de fruits:
classe d'exportation AppComponent {username = 'dreamApple'; âge = 22; FruitsList = [New Fruit ('pomme', 20), New Fruit ('Orange', 30), New Fruit ('Pear', 40), New Fruit ('Banana', 50)]; // NOInSpection TypeScriptUnResolvedVariable Fruit = this.fruitsList [0] .name; // Utilisez ce.fruitsList [0]}Ensuite, nous devons changer notre modèle:
La copie de code est la suivante:
<li * ngfor = "Soit Fruit of FruitsList; Soit i = index;"> {{i}} - {{fruit.name}} - {{fruit.price}} </li>
Le résultat final devrait être les suivants:
Enfin, je dois dire que ES6 et TypeScript me donnent l'impression d'écrire Java; Il s'agit également d'un pro et con. L'avantage est qu'il augmente la lisibilité du code, rend le programme plus facile à maintenir et écrit des projets à grande échelle plus pratiques, ce qui rend le travail d'équipe très pratique. Bien sûr, il y a quelques lacunes, qui augmentent principalement les coûts d'apprentissage de chacun; Bien sûr, tout attend avec impatience.