Divvirzienu datu saistīšana Angular

Angular ir iespējams panākt, ka, ievadot tekstu ievades laukā, šis teksts automātiski nokļūst klases īpašībā. To sauc par divvirzienu datu saistīšanu.

Lai šāda saistīšana darbotos, vispirms tā jāieslēdz. Lai to izdarītu, komponenta failā importējam FormsModule:

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

Un pēc tam pievienojam imports īpašībai dekoratorā @Component:

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

Pēc tam divvirzienu datu saistīšana būs ieslēgta, un mēs varam to izmantot. Izmēģināsim to.

Vispirms deklarēsim klases īpašību, kuru mēs pēc tam pakļausim divvirzienu saistīšanai:

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

Pieņemsim, ka mums ir div un ievades lauks. Ļaujiet, ka div tiek attēlots kāds klases īpašība:

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

Piesaistīsim mūsu īpašību text ievades lauka izmaiņām. Lai to izdarītu, ievades laukā jāieraksta speciāla direktīva [(ngModel)], kuras vērtībā jānorāda mūsu klases īpašība:

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

Tagad, ja palaidīsiet kodu un sāksiet ievadīt tekstu ievades laukā, šis teksts nekavējoties sāks parādīties div.

Dots ievades lauks un rindkopa. Ievades laukā tiek ievadīts skaitlis. Uzstādiet tā, lai, ievadot skaitli ievades laukā, rindkopā tiktu attēlots šī skaitļa kvadrāts.

Doti divi ievades lauki un rindkopa. Ievades laukos tiek ievadīti skaitļi. Uzstādiet tā, lai rindkopā parādītos ievadīto skaitļu summa.