En este capítulo, aprenderemos cómo usar Angular2 para mostrar datos y cómo usar sus instrucciones incorporadas NgFor y NgIf
Primero, asegúrese de tener un programa de muestra Angular2 que se pueda ejecutar. Es mejor ser el pequeño proyecto rápido que completamos en el capítulo anterior o el pequeño proyecto rápido que completó de acuerdo con los pasos anteriores al sitio web oficial, porque nuestras explicaciones se basan en esa base; Entonces comencemos el siguiente viaje feliz.
Debido a que nuestra serie de artículos usa TypeScript , antes de leer el siguiente contenido, también podría analizar los tipos de TypeScript o ES6. Sus URL son mecanografiados y ES6. Si ha aprendido idiomas similares orientados a objetos como Java o C ++ antes, será fácil aprender las clases aquí; Las clases aquí son básicamente similares a las de esos idiomas.
En la sección anterior, exportamos una clase vacía en app.component.ts , por lo que debemos comenzar a llenarla para que se complete. Primero, agregamos tres atributos a la clase APPComponent (componente), nombre, edad, fruta; Al igual que lo siguiente:
exportación de clase appComponent {username = 'dreamapple'; edad = 22; fruta = 'manzana'}El método de escritura anterior es en realidad solo una forma de abreviatura, pero el método de escritura completo debe ser el siguiente:
Exportar clase appComponent {// username = 'dreamappli'; // edad = 22; // fruit = 'Apple' Nombre de usuario: String; Edad: número; fruta: cuerda; constructor () {this.username = 'dreamapple'; this.age = 22; this.fruit = 'Apple'; }}Luego tenemos que modificar nuestra plantilla, porque tenemos que usar más HTML en la plantilla, por lo que tenemos que usar Backticks para envolver nuestros fragmentos HTML; Nuestra función del decorador es la siguiente:
@Component ({Selector: 'My-App', Template: `<p> Mi nombre es: {{nombre de usuario}} </p> <p> mi edad es: {{edad}} </p> <p> mi fruta favorita es: {{fruta}} </p>`})Por supuesto, también podemos usar las opciones de configuración de TemplateURL del objeto de metadatos en la función del decorador, como se muestra a continuación:
@Component ({Selector: 'my-app', // Template: `// <p> Mi nombre es: {{username}} </p> // <p> mi edad es: {{edad}} </p> // <p> Mi fruta favorita es: {{fruta}} </p> //`, templ: Templateurl: 'App/Templates/App-Template.html'})Entre ellos, App/Templates/App-Template.html representa el archivo APP-Template.html en la carpeta Templates en el directorio raíz del programa (en lugar de Angular2-Travel), y luego copie el fragmento HTML que escribimos antes.
Desde el proceso anterior, podemos ver que Angular2 todavía usa los aparatos dobles utilizados por Angular1; Se usa como símbolo de interpolación, donde aparece el símbolo de interpolación son los datos que queremos mostrar. A continuación, necesitamos aprender a usar la instrucción incorporada ngfor. Los estudiantes que están familiarizados con Angular1 deben comenzar fácilmente con esta instrucción, porque Ngfor y Ng-Repeat son básicamente lo mismo; Se usa para recorrer un objeto iterable, que generalmente es una matriz.
A continuación, agregamos otro atributo FruitsList a AppComponent, como se muestra a continuación:
exportación de clase appComponent {username = 'dreamapple'; edad = 22; fruitsList = ['manzana', 'naranja', 'pera', 'plátano']; fruta = this.fruitslist [0]; // usa esto.fruitslist [0]}Lo que debemos prestar atención es el lugar comentado. Debemos usar esto. FRUITSLIST para referirnos a los atributos que hemos definido anteriormente. Si se usa la lista de frutas, Angular no sabrá lo que representa.
A continuación, vamos a recorrer esta matriz de frutas y ver cómo representarla en la plantilla.
@Component ({Selector: 'my-app', plantate: `<p> mi nombre es: {{nombre de usuario}} </p> <p> mi edad es: {{age}} </p> <ul> <li *ngfor =" deja fruta de fruitslist "> {fruta}} </li> </l> <p> mi fruta de fruits es: {{frutas}} </p> `})Hay varias cosas a las que deben prestarse atención en el código anterior. Primero, usamos *ngfor en lugar de ngfor. El * aquí no se puede eliminar; Si se elimina, entonces nuestro programa no informará un error, pero solo recortamos el primer elemento de la matriz. Con qué necesita agregar *, puede echar un vistazo a la sintaxis de la plantilla aquí en detalle; Por supuesto, podemos escribir algunas operaciones detrás de la expresión *ngfor que puede ayudarnos a mostrar cada índice, que puede ser como lo siguiente:
<li *ngfor = "Let Fruit of FruitsList; Let i = index;"> {{i}}-{{frutas}} </li>
Hay algunas cosas a tener en cuenta en el código de plantilla anterior. En primer lugar, debe saber que *ngfor es seguido por expresiones, por lo que podemos escribir algunas expresiones simples para ayudarnos a sonar mejor; También usamos palabras clave Let, agregue el alcance de nivel de bloque y limitamos estas variables al bloque de bucle *ngfor. Ok, si quieres saber más sobre *ngfor, puedes echar un vistazo a la API oficial sobre NGFOR.
La siguiente instrucción a introducir es NGIF. Por supuesto, esta instrucción es básicamente similar a la instrucción NG-IF de Angular1. Decide si agregar o eliminar un elemento en el DOM en función del valor de la siguiente expresión.
Vea cómo usamos esta directiva en la plantilla:
<p *ngif = "fruitsList.length> 3"> La longitud de la lista de fruits es mayor que 3 </p>
<p *ngif = "fruitsList.length <= 3"> La longitud de la lista de fruits no es mayor que 3 </p>
En primer lugar, debemos señalar que, como usar *ngfor, usamos *ngif; Luego podemos escribir una expresión después de *ngif, y el resultado de retorno esperado de esta expresión es un valor booleano; Luego, la Directiva *NGIF decidirá si agregar o eliminar el elemento que controla en el DOM en función del valor de esta expresión.
Como usamos TypeScript, podemos usar muchas características nuevas, como usar clases para crear instancias; A continuación, usaremos la clase de frutas para construir nuestra instancia de fruta. Primero, creamos una nueva carpeta en la carpeta de aplicaciones, y luego creamos un archivo fruit.ts, donde escribimos el código de la clase de frutas:
Export Class Fruit {Constructor (Public Name: String, Public Price: Number) {}}Expliquemos el código anterior. Usamos el constructor y declaramos dos propiedades de este objeto en el constructor; Uno es el nombre y el otro es el precio. Usamos el nombre: cadena y precio: parámetros de número en el constructor para crear e inicializar las propiedades de este objeto. A continuación, podemos usar esta clase en nuestro programa;
Primero, presente esta clase en app.component.ts:
import {fruit} de './classes/fruits';
Luego use la clase de frutas en AppComponent para inicializar nuestra lista de frutas:
exportación de clase appComponent {username = 'dreamapple'; edad = 22; FruitsList = [nueva fruta ('manzana', 20), nueva fruta ('naranja', 30), nueva fruta ('pera', 40), nueva fruta ('plátano', 50)]; // Noinspection typeScriptUnResOlvedVariable Fruit = this.fruitsList [0] .name; // usa esto.fruitslist [0]}Entonces necesitamos cambiar nuestra plantilla:
La copia del código es la siguiente:
<li *ngfor = "Let Fruit of FruitsList; Let i = index;"> {{i}}-{{fruit.name}}-{{fruit.price}} </li>
El resultado final debe ser el siguiente:
Finalmente, tengo que decir que tanto ES6 como TypeScript me hacen sentir como escribir Java; Esto también es un profesional y una estafa. La ventaja es que aumenta la legibilidad del código, hace que el programa sea más fácil de mantener y escribe proyectos a gran escala más convenientes, lo que hace que el trabajo en equipo sea muy conveniente. Por supuesto, hay algunas deficiencias, que aumentan principalmente los costos de aprendizaje de todos; Por supuesto, todo está mirando hacia adelante.