Tweedeling data-binding in Angular

In Angular kan jy dit so maak dat soos teks in 'n invoerveld ingetik word, hierdie teks outomaties in 'n klas se eienskap verskyn. Dit word genoem tweedeling data-binding.

Om so 'n binding te laat werk, moet dit eers geaktiveer word. Om dit te doen, laai ons die FormsModule in die komponentlêer in:

import { FormsModule } from '@angular/forms';

En voeg dit dan by die imports eienskap van die @Component dekorator:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

Hierna sal tweedeling data-binding geaktiveer wees en ons kan dit gebruik. Kom ons doen dit.

Laat ons eers 'n klas eienskap verklaar, wat ons dan aan tweedeling binding sal onderwerp:

export class AppComponent {
	public text: string = '';
}

Kom ons sê ons het 'n div en 'n invoerveld. Laat die div 'n sekere klas eienskap vertoon:

<div>
	{{ text }}
</div>
<input>

Kom ons bind ons eienskap text aan die invoerveld se verandering. Om dit te doen, moet ons in die invoerveld 'n spesiale direktief [(ngModel)] skryf, en as waarde moet ons ons klas se eienskap spesifiseer:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

Nou, as jy die kode uitvoer en begin om teks in die invoerveld in te tik, sal hierdie teks dadelik in die div vertoon word.

Gegee 'n invoerveld en 'n paragraaf. 'n Getal word in die invoerveld vertoon. Maak dit so dat soos die getal in die invoerveld ingetik word, die vierkant van hierdie getal in die paragraaf vertoon word.

Gegee twee invoervelde en 'n paragraaf. Getalle word in die invoervelde ingetik. Maak dit so dat die som van die ingetikte getalle in die paragraaf vertoon word.