Angular 2 - Enlace de datos

El enlace bidireccional era una funcionalidad en Angular JS, pero se ha eliminado de Angular 2.x en adelante. Pero ahora, desde el evento de clases en Angular 2, podemos vincularnos a propiedades en la clase AngularJS.

Suponga que tiene una clase con un nombre de clase, una propiedad que tiene un tipo y un valor.

export class className {
   property: propertytype = value;
}

Luego, podría vincular la propiedad de una etiqueta html a la propiedad de la clase.

<html tag htmlproperty = 'property'>

El valor de la propiedad se asignará a la propiedad html del html.

Veamos un ejemplo de cómo podemos lograr la vinculación de datos. En nuestro ejemplo, veremos cómo se muestran las imágenes en las que la fuente de las imágenes vendrá de las propiedades de nuestra clase. Los siguientes son los pasos para lograrlo.

Step 1- Descargue 2 imágenes. Para este ejemplo, descargaremos algunas imágenes simples que se muestran a continuación.

Step 2 - Almacene estas imágenes en una carpeta llamada Imagesen el directorio de la aplicación. Si la carpeta de imágenes no está presente, créela.

Step 3 - Agregue el siguiente contenido en app.component.ts como se muestra a continuación.

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

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

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

Step 4 - Agregue el siguiente contenido en app.component.html como se muestra a continuación.

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

En el archivo app.component.html anterior, estamos accediendo a las imágenes desde las propiedades de nuestra clase.

Salida

La salida del programa anterior debería ser así:

↰ Previous page Next page ↱