Angular 2 - Visualizzazione dati

In Angular JS, è molto facile visualizzare il valore delle proprietà della classe nel modulo HTML.

Facciamo un esempio e capiamo di più sulla visualizzazione dei dati. Nel nostro esempio, vedremo come visualizzare i valori delle varie proprietà nella nostra classe in una pagina HTML.

Step 1 - Cambia il codice del file app.component.ts come segue.

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"];
}

I seguenti punti devono essere annotati sul codice di cui sopra.

• Stiamo definendo un array chiamato appList che del tipo string.

• Stiamo definendo 3 elementi stringa come parte dell'array che è Binding, Display e Services.

• Abbiamo anche definito una proprietà chiamata TutorialName che ha un valore di Angular 2.

Step 2 - Apporta le seguenti modifiche al file app / app.component.html che è il tuo file modello.

<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>

I seguenti punti devono essere annotati sul codice di cui sopra.

• Stiamo facendo riferimento alla proprietà TutorialName per dire "qual è il nome del tutorial nella nostra pagina HTML".

• Stiamo usando il valore di indice per l'array per visualizzare ciascuno dei 3 argomenti nel nostro array.

Step 3- Salva tutte le modifiche al codice e aggiorna il browser, otterrai l'output seguente. Dall'output, puoi vedere chiaramente che i dati vengono visualizzati secondo i valori delle proprietà nella classe.

Un altro semplice esempio, che è vincolante al volo, è l'uso del tag html di input. Visualizza solo i dati mentre i dati vengono digitati nel tag html.

Apporta le seguenti modifiche al file app / app.component.html che è il tuo file modello.

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

I seguenti punti devono essere annotati sul codice di cui sopra.

• [value] = ”username” - Viene utilizzato per associare il nome utente dell'espressione alla proprietà value dell'elemento di input.

• (input) = ”expression” - Questo è un modo dichiarativo per associare un'espressione all'evento di input dell'elemento di input.

• username = $event.target.value - L'espressione che viene eseguita quando viene attivato l'evento di input.

• $event - Un'espressione esposta nelle associazioni di eventi da Angular, che ha il valore del payload dell'evento.

Quando salvi tutte le modifiche al codice e aggiorni il browser, otterrai il seguente output.

Ora, digita qualcosa nella casella di input come "Tutorialspoint". L'output cambierà di conseguenza.