Angular 2 - wyświetlanie danych

W Angular JS bardzo łatwo jest wyświetlić wartość właściwości klasy w postaci HTML.

Weźmy przykład i dowiedzmy się więcej o wyświetlaniu danych. W naszym przykładzie przyjrzymy się wyświetlaniu wartości różnych właściwości w naszej klasie na stronie HTML.

Step 1 - Zmień kod pliku app.component.ts na następujący.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

Należy zwrócić uwagę na następujące punkty dotyczące powyższego kodu.

Definiujemy tablicę o nazwie appList, który z typów string.
Definiujemy 3 elementy ciągów jako część tablicy, czyli Binding, Display i Services.
Zdefiniowaliśmy również właściwość o nazwie TutorialName, która ma wartość Angular 2.

Step 2 - Wprowadź następujące zmiany w pliku app / app.component.html, który jest plikiem szablonu.

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

Należy zwrócić uwagę na następujące punkty dotyczące powyższego kodu.

Odwołujemy się do właściwości TutorialName, aby powiedzieć „jaka jest nazwa samouczka na naszej stronie HTML”.
Używamy wartości indeksu dla tablicy, aby wyświetlić każdy z 3 tematów w naszej tablicy.

Step 3- Zapisz wszystkie zmiany w kodzie i odśwież przeglądarkę, otrzymasz poniższe dane wyjściowe. Na podstawie wyników widać wyraźnie, że dane są wyświetlane zgodnie z wartościami właściwości w klasie.

Innym prostym przykładem, który jest wiążący w locie, jest użycie wejściowego tagu html. Po prostu wyświetla dane podczas wpisywania danych w tagu HTML.

Wprowadź następujące zmiany w pliku app / app.component.html, który jest plikiem szablonu.

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

Należy zwrócić uwagę na następujące punkty dotyczące powyższego kodu.

[value] = ”username” - Służy do powiązania nazwy użytkownika wyrażenia z właściwością value elementu wejściowego.
(input) = ”expression” - Jest to deklaratywny sposób wiązania wyrażenia ze zdarzeniem wejściowym elementu wejściowego.
username = $event.target.value - wyrażenie, które jest wykonywane po uruchomieniu zdarzenia wejściowego.
$event - Wyrażenie uwidocznione w powiązaniach zdarzeń przez Angular, które ma wartość ładunku zdarzenia.

Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki uzyskasz następujące dane wyjściowe.

Teraz wpisz coś w polu wprowadzania, na przykład „Tutorialspoint”. Wyjście odpowiednio się zmieni.