Prosty przykład One Way & Two Way Binding w Angular 8

One Way Binding:

W tym, mamy zamiar pokazać, jak możemy wiązać właściwości w One Way binding, który jest również znany jako Property Binding. Wiązanie jednokierunkowe wiąże właściwości z komponentu do widoku. Ale problem polega na tym, że jeśli zmodyfikujemy wartość tej samej właściwości na stronie html, to nie będzie ona aktualizowana na poziomie komponentu, wartość komponentu tej właściwości pozostanie taka sama. Gdzie możemy użyć wiązania jednokierunkowego:

• Pokazanie wartości otrzymanych z bazy danych i załadowanych do właściwości lub Modelu zadeklarowanego na poziomie komponentu

txtName: string= „Test 1”;

• Wynik jakiegokolwiek obliczenia wykonanego dynamicznie na poziomie komponentu może być zaktualizowany po stronie Widoku przez przypisanie najnowszej wartości do tej właściwości na poziomie komponentu, jak pokazano poniżej:

this.txtName = „Test 2”;

Jak używać One way binding:

Podejście 1: Jeśli po prostu pokazujesz wartość właściwości w <div> jak pokazano poniżej, to użyj następującej składni:

<div>Name is: {{txtName}}</div>

Podejście 2: Jeśli używasz Text-box i chcesz pokazać wartość tej właściwości w Text-box, wtedy możesz użyć następującej składni, aby to osiągnąć:

<input type=”text” =”txtName” />

W powyższej składni, użyliśmy tylko nawiasu kwadratowego, który jest sposobem na osiągnięcie One way data binding. Jeśli dodamy również nawias okrągły wraz z kwadratowym, wtedy staje się to dwukierunkowym wiązaniem danych.

Dwukierunkowe wiązanie danych:

W tym przypadku, wartość właściwości zaktualizowana z komponentu będzie odzwierciedlona na widoku i vice versa. Jak pokazano w poniższym przykładzie, wiązanie dwukierunkowe będzie używane dla właściwości, która jest mapowana do pola tekstowego lub jakiegokolwiek innego typu pola wejściowego. W ten sposób każda modyfikacja wartości pola tekstowego zostanie automatycznie odzwierciedlona we wszystkich miejscach, w których ta właściwość jest wyświetlana lub używana.

<input type=”text” =”txtName” />

Jak pokazano w powyższej składni, musimy zamknąć ngModel zarówno w nawiasie kwadratowym jak i okrągłym. To czyni powyższe pole tekstowe dwukierunkowo wiążącym dane polem wejściowym.

Przykładowy przykład kompletnego jednokierunkowego i dwukierunkowego wiązania danych w Angular 8:

Poniżej znajduje się plik sample-data-binding.component.ts data:

Poniżej znajduje się plik sample-data-binding.component.html dane pliku:

Wynikiem działania powyższego kodu jest:

Jak w powyższym przykładzie, kiedy załadujemy tę stronę, więc na załadowaniu, pokaże ona „Test 1” jako wartość pokazaną we wszystkich miejscach, kiedy zmodyfikujemy wartość pierwszego pola Text-box, to tylko zmodyfikuje wartość tego samego pola Text-box, nie zaktualizuje wartości we wszystkich lokalizacjach, ponieważ jest to One-Way data binding, ale jeśli zmodyfikujemy drugie pole Text-box, które jest Two-Way data binding, to zaktualizuje to pole we wszystkich lokalizacjach na Widoku i na Komponencie.