Angular 2 - Pantalla de datos

En Angular JS, es muy fácil mostrar el valor de las propiedades de la clase en el formulario HTML.

Tomemos un ejemplo y entendamos más sobre la visualización de datos. En nuestro ejemplo, veremos cómo se muestran los valores de las distintas propiedades de nuestra clase en una página HTML.

Step 1 - Cambie el código del archivo app.component.ts por el siguiente.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

Estamos definiendo una matriz llamada appList que es del tipo string.
Estamos definiendo 3 elementos de cadena como parte de la matriz que es Binding, Display y Services.
También hemos definido una propiedad llamada TutorialName que tiene un valor de Angular 2.

Step 2 - Realice los siguientes cambios en el archivo app / app.component.html, que es su archivo de plantilla.

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

Estamos haciendo referencia a la propiedad TutorialName para decir "cuál es el nombre del tutorial en nuestra página HTML".
Estamos usando el valor de índice de la matriz para mostrar cada uno de los 3 temas de nuestra matriz.

Step 3- Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado. En la salida, puede ver claramente que los datos se muestran según los valores de las propiedades en la clase.

Otro ejemplo simple, que es vinculante sobre la marcha, es el uso de la etiqueta html de entrada. Simplemente muestra los datos a medida que se escriben en la etiqueta html.

Realice los siguientes cambios en el archivo app / app.component.html, que es su archivo de plantilla.

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

[value] = ”username” - Se utiliza para vincular la expresión nombre de usuario a la propiedad de valor del elemento de entrada.
(input) = ”expression” - Esta es una forma declarativa de vincular una expresión al evento de entrada del elemento de entrada.
username = $event.target.value - La expresión que se ejecuta cuando se dispara el evento de entrada.
$event - Una expresión expuesta en enlaces de eventos por Angular, que tiene el valor de la carga útil del evento.

Cuando guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Ahora, escriba algo en el cuadro de entrada, como "Tutorialspoint". La salida cambiará en consecuencia.

↰ Previous page Next page ↱