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 -