Wiązanie danych w Angular jest ważnym tematem, jeśli chodzi o przekazywanie danych pomiędzy komponentami do DOM. W tym artykule omówię jednokierunkowe i dwukierunkowe wiązanie danych.
Jest to jednokierunkowa metoda wiązania danych. Jeśli używamy jednokierunkowego wiązania danych, możemy tylko wiązać dane z komponentu do widoku lub z widoku do komponentu. Istnieje wiele różnych sposobów, na które możemy użyć jednokierunkowego wiązania danych w naszej aplikacji Angular.
- Wiązanie interpolacyjne
Interpolacja jest bardzo powszechną metodą, której używamy do wiązania danych w Angular i odnosi się to do wiązania wartości do elementów UI.
Jak pokazano w przykładzie, możemy użyć powiązanej zmiennej w elementach HTML poprzez dodanie nawiasów klamrowych jak {{Nazwa}}. Ta metoda jest używana głównie wtedy, gdy musimy połączyć dwie wartości. np.: {{FirstName}} {{Last Name}}.
2. Wiązanie właściwości.
Jest to kolejne szeroko stosowane podejście do wiązania danych i za pomocą tej metody, możemy wiązać wartości z komponentów do właściwości DOM elementów HTML.
Jeśli użyjemy Interpolacji w takich sytuacjach przycisk będzie zawsze wyłączony pomijając wartość zmiennej.
3. Attribute Binding
Attribute Binding jest używany do wiązania właściwości atrybutu elementu widoku. Weźmy scenariusz, w którym musimy połączyć niektóre kolumny w tabeli za pomocą atrybutu colspan.
Jeśli użyjemy zmiennej wartości, jak pokazano w komentarzu lub jako wiązanie właściwości, spowoduje to błąd. Tak więc musimy użyć wiązania atrybutów z początkiem attr i następującą po nim kropką i nazwą atrybutu.
4. Wiązanie klas
Syntaktyka wiązania klas jest bardzo podobna do wiązania atrybutów i ta metoda jest używana do ustawiania właściwości klasy elementu widoku. Za pomocą tej metody wiązania, możemy dodawać klasy CSS warunkowo do elementu, tworząc dynamicznie stylizowane elementy.
Właściwość CSS red zostanie zastosowana tylko wtedy, gdy ocena studenta będzie niższa niż 40. Podobnie jak w przypadku wiązania atrybutów, wiązanie klas rozpoczyna się od słowa kluczowego class, po którym następuje kropka i nazwa klasy.
5. Style Binding
Ta metoda jest również bardzo podobna do poprzednich dwóch metod i możemy ustawić Style Binding aby ustawić style css inline.
Dwukierunkowe wiązanie danych
Dwukierunkowe wiązanie danych polega na ustanowieniu dwukierunkowego połączenia między widokiem a komponentem, pozwalając użytkownikom na wymianę danych w obie strony. Dwukierunkowe wiązanie danych może być łatwo osiągnięte poprzez użycie (ngModel).
Proszę upewnić się, że importujesz FormsModule z @angular/forms do pliku app.component.ts jeśli używasz (ngModel).