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.