Angular 2 - Data Binding

A vinculação bidirecional era uma funcionalidade do Angular JS, mas foi removida do Angular 2.x em diante. Mas agora, desde o evento de classes em Angular 2, podemos associar a propriedades em classe AngularJS.

Suponha que se você tivesse uma classe com um nome de classe, uma propriedade que tinha um tipo e valor.

export class className {
   property: propertytype = value;
}

Você pode então vincular a propriedade de uma tag html à propriedade da classe.

<html tag htmlproperty = 'property'>

O valor da propriedade seria então atribuído à propriedade html do html.

Vejamos um exemplo de como podemos obter vinculação de dados. Em nosso exemplo, veremos a exibição de imagens em que a origem das imagens virá das propriedades em nossa classe. A seguir estão as etapas para conseguir isso.

Step 1- Baixe quaisquer 2 imagens. Para este exemplo, iremos baixar algumas imagens simples mostradas abaixo.

Step 2 - Armazene essas imagens em uma pasta chamada Imagesno diretório do aplicativo. Se a pasta de imagens não estiver presente, crie-a.

Step 3 - Adicione o seguinte conteúdo em app.component.ts conforme mostrado abaixo.

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 - Adicione o seguinte conteúdo em app.component.html conforme mostrado abaixo.

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

No arquivo app.component.html acima, estamos acessando as imagens das propriedades em nossa classe.

Resultado

A saída do programa acima deve ser assim -

↰ Previous page Next page ↱