Dvikryptis duomenų susiejimas Angular

Angular galima padaryti taip, kad kai įvedamas tekstas į įvesties lauką, šis tekstas automatiškai patektų į klasės savybę. Tai vadinama dvikryptis duomenų susiejimas.

Kad toks susiejimas veiktų, pirmiausia jį reikia įjungti. Tam failelyje komponento importuojame FormsModule:

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

Ir tada pridedame prie imports savybės dekoratoriaus @Component:

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

Po to dvikryptis duomenų susiejimas bus įjungtas ir mes galime jį panaudoti. Padarykime tai.

Pirmiausia deklaruokime klasės savybę, kurią vėliau paveiksime dvikrypčiu susiejimu:

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

Tarkime, kad turime div ir input. Tegu div'e atvaizduojama tam tikra klasės savybė:

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

Susiekime mūsų savybę text su įvesties lauko pasikeitimu. Tam įvesties lauke reikia parašyti specialią direktyvą [(ngModel)], kurios reikšmėje reikia nurodyti mūsų klasės savybę:

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

Dabar, jei paleisime kodą ir pradėsime įvesti tekstą į įvesties lauką, šis tekstas iškart pradės rodytis div'e.

Duotas įvesties laukas ir pastraipa. Į įvesties lauką išvedamas skaičius. Padarykite taip, kad kai įvedamas skaičius į įvesties lauką, pastraipoje būtų rodomas šio skaičiaus kvadratas.

Duoti du įvesties laukai ir pastraipa. Į įvesties laukus įvedami skaičiai. Padarykite taip, kad pastraipoje būtų rodoma įvestų skaičių suma.