Ora che abbiamo esaminato l'associazione dei dati,
facciamo uso di loro per
lavorare sull'applicazione angolare che abbiamo usato finora.
Nella versione precedente dell'applicazione Angular,
avevamo il rendering del menu,
e poi avevamo un piatto specifico che veniva mostrato in basso.
Ora, vorremmo idealmente per l'utente essere in grado di fare clic
su una qualsiasi delle voci di menu e quindi i dettagli da mostrare all'utente.
Questo è dove l'uso di associazione dati ci aiuterà
a implementare la nostra applicazione per abilitare questo tipo di una funzionalità.
Andando allo stato attuale della nostra applicazione nel browser,
ora possiamo vedere che abbiamo il nostro menu e in fondo
abbiamo i dettagli di un piatto specifico che viene mostrato lì.
Ora, questo va bene e bene per cominciare, ma idealmente,
quello che vorremmo avere è che se l'utente fa clic su uno di questi piatti,
vogliamo essere in grado di mostrare i dettagli del piatto nella parte inferiore del menu qui.
Quindi, vorremmo che i dettagli del piatto venissero modificati
in base al piatto specifico su cui clicchiamo in qualsiasi momento.
Quindi, come possiamo raggiungere questo obiettivo?
Quindi, questo è dove l'uso del binding dei dati viene in nostro soccorso.
Andando alla nostra applicazione,
la prima cosa che ho intenzione di fare è nella cartella condivisa,
ora ti rendi conto che le informazioni del piatto vengono
utilizzate sia nel componente del menu che nel componente di dettaglio del piatto.
Ora, quando si dispone di informazioni condivise in questo modo,
sarebbe piuttosto più conveniente avere una posizione centralizzata
da cui queste informazioni vengono fornite a entrambi questi componenti.
Quindi, per aiutarmi a farlo,
quello che ho intenzione di fare è andare nella cartella di condivisione e quindi creare un nuovo file,
e poi nominerò questo file come dishes.ts.
All' interno di questo file dishes.ts,
ho intenzione di creare la costante che fornisce i dettagli dei piatti.
Quindi, per farlo,
vorrei prima importare il piatto,
dalla classe di piatti
che ho già definito in precedenza.
Così ora, posso definire una
costante chiamata come piatti del tipo un array di piatti,
e poi questo è dove ho intenzione di memorizzare i dettagli di tutti i miei piatti.
Ora, nella versione precedente dell'applicazione,
abbiamo visto l'uso dei piatti e abbiamo visto
l'array di oggetti JavaScript che contiene i dettagli dei piatti.
Ora, stiamo andando a spostare tutto quel contenuto e con una versione aggiornata di esso.
Quindi, una versione aggiornata della
matrice di oggetti JavaScript piatti è data nelle istruzioni,
quindi basta andare e copiare
l'intero array di oggetti JavaScript da lì e poi lo incolleremo in posizione qui.
Quindi, questo diventa la posizione centrale da cui vengono
fornite le informazioni sui piatti alla tua applicazione.
Ora ho tagliato e incollato i dettagli
del piatto che sono dati nelle istruzioni di esercizio in posizione qui,
e così ho quattro piatti incollati qui uno,
due tre e quattro piatti incollati qui,
e ognuno di questi piatti contiene naturalmente
i dettagli del piatto specifico e anche commenti per il piatto.
Ora in questo modo rendere le informazioni nel
modello di dettaglio piatto diventa semplice per uno di questi piatti scelti.
Ora, se si torna indietro si vedrà che ci sono alcune linee rosse qui.
La ragione di queste linee rosse è perché quando guardi l'oggetto piatto qui dentro,
vedrai che nell'oggetto piatto non abbiamo una proprietà lì chiamata come commenti.
Quindi, dobbiamo creare una nuova proprietà chiamata
commenti da aggiungere in quel piatto qui. Allora, come facciamo?
Quindi, per fare questo, diremo commenti e
poi direi array commento qui.
Ora subito ti rendi conto che non c'è alcun array di commenti a nostra disposizione,
quindi abbiamo bisogno di creare quell'array di commenti.
Quindi, quello che ho intenzione di fare è creare un'altra classe JavaScript
che contiene i dettagli del commento lì.
Quindi, per farlo, prima importerò il commento
dalla classe di commento qui.
Ora, naturalmente, la linea rossa mi dice immediatamente che non ho una classe di commento.
Quindi, come aggiungiamo una classe di commento?
Quindi, andando alla cartella condivisa,
creeremo un nuovo file chiamato comment.ts e all'interno di questo comment.ts,
definiremo una classe chiamata commento qui.
Ora, abbiamo bisogno di definire alcune proprietà per questa classe di commento.
Quindi, quali sono le proprietà che abbiamo?
Diamo una rapida occhiata al nostro file dishes.ts
e poi vedremo quali sono le proprietà per ogni commento.
Andando al file dishes.ts,
si vede che i commenti contengono
una proprietà chiamata come una valutazione che sembra essere un numero,
quindi si ha un commento che è una stringa e un
autore che è una stringa e una data che è anche una stringa.
Quindi, abbiamo bisogno di definire quattro proprietà per la mia classe di commento qui.
Quindi, tornando alla classe di commento,
definirei la valutazione come numero.
Quindi, nello script di tipo,
tutto è un numero qui quindi abbiamo avuto un commento che è un autore di stringa,
che è anche una stringa,
e quindi la data che è anche una stringa qui.
Quindi, queste sono le quattro proprietà che abbiamo qui.
Ora, ovviamente abbiamo visto come usiamo la stringa data nell'esercizio precedente,
e nell'assegnazione come abbiamo fatto uso
della stringa data per mostrare la data per il commento lì.
Ora, nel caso ti stia chiedendo,
cosa contiene effettivamente questa stringa di data?
Andando qui, vedrai che questa stringa di data è con un certo formato.
Quindi, questo è il formato standard per memorizzare una data qui.
Questo formato di data è il modo ISO OSI per specificare il formato della data.
Quindi, useremo solo questo,
quindi questo è un formato standardizzato che viene utilizzato anche in
molti linguaggi di programmazione che consente di memorizzare i dati come una stringa qui,
quindi ho intenzione di farne uso come tale qui.
Dopo aver apportato le modifiche al
file dish.ts come questo qui e poi anche aggiunto nella classe di commento qui,
ora vediamo che il file dishes.ts non ha più quelle linee rosse perché
il commento è stato aggiunto come array di oggetti alla mia classe di piatti qui.
Quindi, questo funziona bene finora.
Ora, come facciamo a usarlo?
Ora per fare uso di questo,
andremo al menu component.ts,
e poi qui abbiamo questa costante definita qui.
Ora, questo non è il modo giusto per farlo
più tardi, mi vedrai usare un servizio per tutto questo.
Quindi, lasciami tagliare completamente questa costante da qui e invece di usare quella costante,
ora importerò piatti
dalla cartella condivisa
qui, piatti condivisi qui.
Quindi, si noti che questa cartella piatti sta esportando la costante piatti qui.
Quindi, questo è il motivo per cui siamo in grado di farne uso.
Quindi, tornando ai piatti uno qui,
ho bisogno di esportare questo da qui,
quindi direi esportazione.
Costante. Quindi, quando lo faccio,
allora nel mio componente menu posso vedere che i miei piatti possono essere importati qui correttamente.
Quindi, il resto del codice qui funzionerà perfettamente senza alcuna modifica.
Vedrai che se salvi i valori
di tanto in tanto guardi la tua applicazione web nel browser,
verrà resa bene anche dopo queste modifiche.
Dopo aver salvato tutte le modifiche che hai fatto finora in tutti i file,
se vai a guardare la tua pagina web,
la tua pagina web rende proprio come prima.
Ora, la seconda parte del problema.
Vogliamo essere in grado di comunicare.
Quando clicchiamo su una di queste voci di menu,
vogliamo essere in grado di comunicare tali informazioni in modo che
il piatto corrispondente venga reso qui.
Quindi, questo è dove stiamo andando a prendere l'aiuto
del legame dati che abbiamo imparato finora.
Tornando al file modello dei componenti del menu,
quello che faremo è che per
questo «app-dishdetail» che includi in basso qui,
per aggiungere nel modello dei componenti di dettaglio piatto al modello dei componenti del menu,
aggiungeremo una proprietà chiamata come Dish.
Quindi, assegneremo questo per essere «SelectedDish».
Ricorderete che il piatto selezionato è una variabile che abbiamo
definito nei nostri componenti di menu file TypeScript qui.
Quindi, in questo modo; quel valore di quel piatto selezionato
verrà passato attraverso questo piatto di proprietà qui.
Ora, vedremo come il componente dettaglio piatto può recuperare queste informazioni
e poi fare uso di esso bene nella fase successiva dell'esercizio.
Ora, mentre siamo qui,
risolveremo anche l'altro problema che dobbiamo affrontare.
Cioè, quando una qualsiasi delle voci di menu viene cliccato,
allora genererà un evento click e vogliamo che le informazioni da
consegnare al nostro componente di menu file TypeScript.
Quindi, per farlo, andremo in liste griglia di menu che abbiamo definito qui.
Per questa tessera della griglia qui,
quello che ho intenzione di fare è definire l'evento click qui.
Quindi, per l'evento click,
quello che ho intenzione di fare è chiamare il
metodo select che definirò all'interno del mio file component.ts del menu.
Per questo metodo onSelect,
ho intenzione di fornire il piatto come parametro qui.
Cos' è questo piatto?
Questo piatto è esattamente questo piatto che hai selezionato in
questo «piatto di piatti» nella sintassi ngFor qui.
Quindi, quel piatto specifico,
fuori dalla matrice di piatti che hai selezionato qui,
verrà passato come parametro a questo metodo onSelect,
quello che stiamo per implementare nel nostro file component.ts del menu.
Quindi, ora che abbiamo fatto questo,
quindi questo è il gestore che deve essere implementato.
Andiamo al file componente del menu e quindi aggiustare
questo file per implementare questo gestore lì.
Quindi, quando fai un clic su una qualsiasi delle voci di menu,
verrà chiamata la maniglia corrispondente e
le informazioni specifiche del piatto verranno passate come parametro qui.
Andando al file component.ts del menu, ora,
al piatto selezionato verrà assegnato un valore in base al piatto selezionato.
Quindi, ho intenzione di rimuovere quella parte e poi proprio qui sotto,
ho intenzione di implementare il metodo onSelect qui.
Quindi, per il metodo onSelect,
questo otterrà un parametro che è il parametro piatto.
Quando arriva quel parametro piatto,
assegnerò questo selectedDish uguale a dish,
il parametro che è entrato come valore per il metodo onSelect qui.
Quindi, questo è quanto.
Quindi, quando si fa clic su uno qualsiasi di questi elementi nel menu,
uno qualsiasi dei piatti nel menu,
le informazioni sui piatti saranno passate attraverso questo e poi
il piatto selezionato verrà assegnato a quell'oggetto piatto qui.
Ora, abbiamo come le informazioni arrivano dal DOM.
Il clic specifico farà sì che le informazioni del piatto
siano disponibili per noi e al piatto selezionato verrà assegnato quel valore.
Ora, tornando al file HTML componente di menu,
vediamo che abbiamo già assegnato questa proprietà piatto a SelectedDish.
Quindi, in questo modo, quel valore del piatto selezionato viene passato
attraverso questa proprietà del piatto a questo app-dishdetail qui.
Ora, come fa il mio componente di dettaglio piatto a ottenere queste informazioni?
Per questo, andremo al componente dettaglio piatto e sistemarlo.
Andando al componente dettaglio piatto,
la prima cosa che ho intenzione di fare è eliminare
questa costante piatto dal mio componente dettaglio piatto.
Non ne ho più bisogno.
Ora, quando una proprietà viene associata,
come quello che abbiamo visto nel file HTML componente menu,
quindi nel mio file di dettaglio piatto,
posso usare un altro modulo chiamato come modulo di input.
Quindi, per questo piatto,
ho intenzione di dichiararlo semplicemente come DISH.
Ora, questo modulo di input mi permette di dichiarare un decoratore
per questa variabile di piatto che ho definito qui
, come questa, all'ingresso con la parentesi qui a quel piatto qui.
Quindi, anche, ho bisogno di importare
la classe di piatti
dal piatto condiviso qui.
Quindi, con questo, quindi quello che è successo è che sto facendo uso del modulo di input.
Quindi, questo è un modo per fornire informazioni in un componente da un altro componente.
Si associa una proprietà nel modello
dell'altro componente come abbiamo visto nel file component.html del menu,
e quindi che sarà disponibile come input per questo componente
dichiarando una variabile e quindi chiamando il decoratore di input per questo.
Ora, con questo, salviamo le modifiche a tutti i file che abbiamo fatto
e poi diamo un'occhiata alla replica angolare.
Andando al nostro browser,
vediamo che in questa replica angolare,
non viene visualizzato nulla qui.
Perché in questo momento, il piatto selezionato,
non abbiamo selezionato nessuno dei piatti così anche il piatto selezionato
è un oggetto vuoto lì.
Quindi, usiamo il NGIF nel modello per il dettaglio del piatto.
Quindi, dando una rapida occhiata al modello di dettagli del piatto,
hai implementato questo come parte del tuo compito.
Quindi, avresti dovuto usare il NGIF con il piatto sia per il codice,
sia per l'elenco MD lì.
Quindi, se lo fai,
quando il piatto è attualmente deselezionato,
non verrà visualizzato nulla in basso.
Ma nel momento in cui clicco su uno qualsiasi dei piatti,
allora vedi immediatamente i dettagli del piatto visualizzato in basso qui.
Ora posso selezionare il secondo piatto e poi subito,
noterete che i dettagli del piatto visualizzati di seguito sono cambiati.
Quindi, ogni volta che clicco su uno di questi piatti,
i dettagli di quel piatto specifico,
compresi i commenti saranno visualizzati in basso qui.
Quindi, questo è esattamente ciò che vogliamo ottenere in questo particolare esercizio.
Quindi, qui, avete visto l'uso di associazione dati, tre tipi diversi,
tra cui il gestore di eventi e eventi,
e anche avete visto come possiamo fare uso del modulo di input per essere in grado di
recuperare informazioni in un componente proveniente da un altro componente.
Con questo, completiamo questo esercizio,
in cui abbiamo imparato come utilizzare varie
funzionalità di associazione dati disponibili in Angular per implementare la nostra applicazione.
Questo è un buon momento per fare un commit git con l'associazione dei dati del messaggio.