Angular data binding este un subiect important atunci când vine vorba de trecerea datelor între componente în DOM. În acest articol, voi discuta despre data binding unidirecțional și bidirecțional.
Aceasta este o metodă de data binding unidirecțională. Dacă folosim o legătură de date unidirecțională, putem lega datele doar de la componentă la vizualizare sau de la vizualizare la componentă. Există multe moduri diferite în care putem folosi legarea datelor unidirecțională în aplicația noastră Angular.
- Legarea prin interpolare
Interpolarea este o metodă foarte comună pe care o folosim pentru a lega date în Angular și se referă la legarea valorilor în elementele UI.
După cum se arată în exemplul de mai sus, putem utiliza variabila legată în elemente HTML prin adăugarea de paranteze curly ca {{Name}}. Această metodă este folosită mai ales atunci când avem nevoie să concatenăm două valori. de exemplu : {{FirstName}} {{Last Name}}.
2. Property Binding.
Aceasta este o altă abordare utilizată pe scară largă pentru a lega date și cu această metodă, putem lega valori din componente în proprietățile DOM ale elementelor HTML.
Dacă folosim Interpolarea în astfel de situații butonul va fi întotdeauna dezactivat neglijând valoarea variabilei.
3. Legătura de atribute
Legătura de atribute este utilizată pentru a lega o proprietate de atribut a unui element de vizualizare. Să luăm un scenariu în care trebuie să îmbinăm câteva coloane într-un tabel folosind un atribut colspan.
Dacă folosim o variabilă de valoare așa cum se arată în comentariu sau ca o legare de proprietate, va rezulta o eroare. Așadar, trebuie să folosim o legătură de atribut care începe cu attr și este urmată de un punct și de numele atributului.
4. Legătura de clasă
Sintaxa legăturii de clasă este foarte asemănătoare cu cea a legăturii de atribut și această metodă este utilizată pentru a seta o proprietate de clasă a unui element de vizualizare. Cu ajutorul acestei metode de legare, putem adăuga clase CSS în mod condiționat unui element, creând elemente stilizate în mod dinamic.
Proprietatea CSS de culoare roșie va fi aplicată numai atunci când notele elevilor sunt mai mici de 40. La fel ca și legarea atributelor, legarea claselor începe cu cuvântul cheie class urmat de un punct și de numele clasei.
5. Style Binding
Această metodă este, de asemenea, foarte asemănătoare cu cele două metode anterioare și putem seta Style Binding pentru a seta stiluri css inline.
Two-Way Data Binding
Two-way data binding constă în stabilirea unei conexiuni bidirecționale între View și componentă, permițând utilizatorilor să facă schimb de date în ambele sensuri. Legătura de date bidirecțională poate fi realizată cu ușurință prin utilizarea (ngModel).
Vă rugăm să vă asigurați că importați FormsModule din @angular/forms în fișierul app.component.ts dacă utilizați (ngModel).
.