1
00:00:00,000 --> 00:00:07,225
Ora che abbiamo esaminato l'associazione dei dati,

2
00:00:07,225 --> 00:00:10,275
facciamo uso di loro per

3
00:00:10,275 --> 00:00:14,715
lavorare sull'applicazione angolare che abbiamo usato finora.

4
00:00:14,715 --> 00:00:17,504
Nella versione precedente dell'applicazione Angular,

5
00:00:17,504 --> 00:00:20,190
avevamo il rendering del menu,

6
00:00:20,190 --> 00:00:24,655
e poi avevamo un piatto specifico che veniva mostrato in basso.

7
00:00:24,655 --> 00:00:28,770
Ora, vorremmo idealmente per l'utente essere in grado di fare clic

8
00:00:28,770 --> 00:00:32,990
su una qualsiasi delle voci di menu e quindi i dettagli da mostrare all'utente.

9
00:00:32,990 --> 00:00:37,325
Questo è dove l'uso di associazione dati ci aiuterà

10
00:00:37,325 --> 00:00:43,430
a implementare la nostra applicazione per abilitare questo tipo di una funzionalità.

11
00:00:43,430 --> 00:00:48,470
Andando allo stato attuale della nostra applicazione nel browser,

12
00:00:48,470 --> 00:00:52,040
ora possiamo vedere che abbiamo il nostro menu e in fondo

13
00:00:52,040 --> 00:00:56,370
abbiamo i dettagli di un piatto specifico che viene mostrato lì.

14
00:00:56,370 --> 00:01:01,625
Ora, questo va bene e bene per cominciare, ma idealmente,

15
00:01:01,625 --> 00:01:06,350
quello che vorremmo avere è che se l'utente fa clic su uno di questi piatti,

16
00:01:06,350 --> 00:01:12,585
vogliamo essere in grado di mostrare i dettagli del piatto nella parte inferiore del menu qui.

17
00:01:12,585 --> 00:01:17,165
Quindi, vorremmo che i dettagli del piatto venissero modificati

18
00:01:17,165 --> 00:01:22,250
in base al piatto specifico su cui clicchiamo in qualsiasi momento.

19
00:01:22,250 --> 00:01:24,100
Quindi, come possiamo raggiungere questo obiettivo?

20
00:01:24,100 --> 00:01:28,355
Quindi, questo è dove l'uso del binding dei dati viene in nostro soccorso.

21
00:01:28,355 --> 00:01:31,735
Andando alla nostra applicazione,

22
00:01:31,735 --> 00:01:35,750
la prima cosa che ho intenzione di fare è nella cartella condivisa,

23
00:01:35,750 --> 00:01:39,800
ora ti rendi conto che le informazioni del piatto vengono

24
00:01:39,800 --> 00:01:45,090
utilizzate sia nel componente del menu che nel componente di dettaglio del piatto.

25
00:01:45,090 --> 00:01:49,100
Ora, quando si dispone di informazioni condivise in questo modo,

26
00:01:49,100 --> 00:01:53,120
sarebbe piuttosto più conveniente avere una posizione centralizzata

27
00:01:53,120 --> 00:01:57,170
da cui queste informazioni vengono fornite a entrambi questi componenti.

28
00:01:57,170 --> 00:01:58,880
Quindi, per aiutarmi a farlo,

29
00:01:58,880 --> 00:02:03,470
quello che ho intenzione di fare è andare nella cartella di condivisione e quindi creare un nuovo file,

30
00:02:03,470 --> 00:02:09,150
e poi nominerò questo file come dishes.ts.

31
00:02:09,150 --> 00:02:11,540
All' interno di questo file dishes.ts,

32
00:02:11,540 --> 00:02:16,840
ho intenzione di creare la costante che fornisce i dettagli dei piatti.

33
00:02:16,840 --> 00:02:17,980
Quindi, per farlo,

34
00:02:17,980 --> 00:02:27,380
vorrei prima importare il piatto,

35
00:02:27,380 --> 00:02:34,400
dalla classe di piatti

36
00:02:34,400 --> 00:02:36,760
che ho già definito in precedenza.

37
00:02:36,760 --> 00:02:40,625
Così ora, posso definire una

38
00:02:40,625 --> 00:02:48,230
costante chiamata come piatti del tipo un array di piatti,

39
00:02:48,230 --> 00:02:53,590
e poi questo è dove ho intenzione di memorizzare i dettagli di tutti i miei piatti.

40
00:02:53,590 --> 00:02:56,495
Ora, nella versione precedente dell'applicazione,

41
00:02:56,495 --> 00:03:00,500
abbiamo visto l'uso dei piatti e abbiamo visto

42
00:03:00,500 --> 00:03:04,610
l'array di oggetti JavaScript che contiene i dettagli dei piatti.

43
00:03:04,610 --> 00:03:09,830
Ora, stiamo andando a spostare tutto quel contenuto e con una versione aggiornata di esso.

44
00:03:09,830 --> 00:03:12,485
Quindi, una versione aggiornata della

45
00:03:12,485 --> 00:03:16,520
matrice di oggetti JavaScript piatti è data nelle istruzioni,

46
00:03:16,520 --> 00:03:18,065
quindi basta andare e copiare

47
00:03:18,065 --> 00:03:22,760
l'intero array di oggetti JavaScript da lì e poi lo incolleremo in posizione qui.

48
00:03:22,760 --> 00:03:25,625
Quindi, questo diventa la posizione centrale da cui vengono

49
00:03:25,625 --> 00:03:30,215
fornite le informazioni sui piatti alla tua applicazione.

50
00:03:30,215 --> 00:03:34,610
Ora ho tagliato e incollato i dettagli

51
00:03:34,610 --> 00:03:39,770
del piatto che sono dati nelle istruzioni di esercizio in posizione qui,

52
00:03:39,770 --> 00:03:43,640
e così ho quattro piatti incollati qui uno,

53
00:03:43,640 --> 00:03:46,030
due tre e quattro piatti incollati qui,

54
00:03:46,030 --> 00:03:48,710
e ognuno di questi piatti contiene naturalmente

55
00:03:48,710 --> 00:03:52,560
i dettagli del piatto specifico e anche commenti per il piatto.

56
00:03:52,560 --> 00:03:55,610
Ora in questo modo rendere le informazioni nel

57
00:03:55,610 --> 00:04:02,360
modello di dettaglio piatto diventa semplice per uno di questi piatti scelti.

58
00:04:02,360 --> 00:04:09,130
Ora, se si torna indietro si vedrà che ci sono alcune linee rosse qui.

59
00:04:09,130 --> 00:04:16,700
La ragione di queste linee rosse è perché quando guardi l'oggetto piatto qui dentro,

60
00:04:16,700 --> 00:04:23,210
vedrai che nell'oggetto piatto non abbiamo una proprietà lì chiamata come commenti.

61
00:04:23,210 --> 00:04:26,060
Quindi, dobbiamo creare una nuova proprietà chiamata

62
00:04:26,060 --> 00:04:30,480
commenti da aggiungere in quel piatto qui. Allora, come facciamo?

63
00:04:30,480 --> 00:04:35,060
Quindi, per fare questo, diremo commenti e

64
00:04:35,060 --> 00:04:41,275
poi direi array commento qui.

65
00:04:41,275 --> 00:04:47,690
Ora subito ti rendi conto che non c'è alcun array di commenti a nostra disposizione,

66
00:04:47,690 --> 00:04:50,495
quindi abbiamo bisogno di creare quell'array di commenti.

67
00:04:50,495 --> 00:04:54,605
Quindi, quello che ho intenzione di fare è creare un'altra classe JavaScript

68
00:04:54,605 --> 00:04:59,090
che contiene i dettagli del commento lì.

69
00:04:59,090 --> 00:05:17,340
Quindi, per farlo, prima importerò il commento

70
00:05:17,340 --> 00:05:20,750
dalla classe di commento qui.

71
00:05:20,750 --> 00:05:25,435
Ora, naturalmente, la linea rossa mi dice immediatamente che non ho una classe di commento.

72
00:05:25,435 --> 00:05:27,375
Quindi, come aggiungiamo una classe di commento?

73
00:05:27,375 --> 00:05:29,500
Quindi, andando alla cartella condivisa,

74
00:05:29,500 --> 00:05:37,940
creeremo un nuovo file chiamato comment.ts e all'interno di questo comment.ts,

75
00:05:37,940 --> 00:05:48,250
definiremo una classe chiamata commento qui.

76
00:05:50,300 --> 00:05:55,695
Ora, abbiamo bisogno di definire alcune proprietà per questa classe di commento.

77
00:05:55,695 --> 00:05:57,605
Quindi, quali sono le proprietà che abbiamo?

78
00:05:57,605 --> 00:06:00,890
Diamo una rapida occhiata al nostro file dishes.ts

79
00:06:00,890 --> 00:06:05,310
e poi vedremo quali sono le proprietà per ogni commento.

80
00:06:06,170 --> 00:06:09,085
Andando al file dishes.ts,

81
00:06:09,085 --> 00:06:11,555
si vede che i commenti contengono

82
00:06:11,555 --> 00:06:15,470
una proprietà chiamata come una valutazione che sembra essere un numero,

83
00:06:15,470 --> 00:06:18,110
quindi si ha un commento che è una stringa e un

84
00:06:18,110 --> 00:06:21,490
autore che è una stringa e una data che è anche una stringa.

85
00:06:21,490 --> 00:06:26,690
Quindi, abbiamo bisogno di definire quattro proprietà per la mia classe di commento qui.

86
00:06:26,690 --> 00:06:30,075
Quindi, tornando alla classe di commento,

87
00:06:30,075 --> 00:06:34,770
definirei la valutazione come numero.

88
00:06:34,770 --> 00:06:37,410
Quindi, nello script di tipo,

89
00:06:37,410 --> 00:06:47,575
tutto è un numero qui quindi abbiamo avuto un commento che è un autore di stringa,

90
00:06:47,575 --> 00:06:49,480
che è anche una stringa,

91
00:06:49,480 --> 00:06:56,500
e quindi la data che è anche una stringa qui.

92
00:06:56,500 --> 00:07:01,130
Quindi, queste sono le quattro proprietà che abbiamo qui.

93
00:07:01,130 --> 00:07:09,620
Ora, ovviamente abbiamo visto come usiamo la stringa data nell'esercizio precedente,

94
00:07:09,620 --> 00:07:13,040
e nell'assegnazione come abbiamo fatto uso

95
00:07:13,040 --> 00:07:17,410
della stringa data per mostrare la data per il commento lì.

96
00:07:17,410 --> 00:07:19,755
Ora, nel caso ti stia chiedendo,

97
00:07:19,755 --> 00:07:22,540
cosa contiene effettivamente questa stringa di data?

98
00:07:22,540 --> 00:07:28,260
Andando qui, vedrai che questa stringa di data è con un certo formato.

99
00:07:28,260 --> 00:07:32,165
Quindi, questo è il formato standard per memorizzare una data qui.

100
00:07:32,165 --> 00:07:38,230
Questo formato di data è il modo ISO OSI per specificare il formato della data.

101
00:07:38,230 --> 00:07:39,775
Quindi, useremo solo questo,

102
00:07:39,775 --> 00:07:42,670
quindi questo è un formato standardizzato che viene utilizzato anche in

103
00:07:42,670 --> 00:07:48,430
molti linguaggi di programmazione che consente di memorizzare i dati come una stringa qui,

104
00:07:48,430 --> 00:07:51,500
quindi ho intenzione di farne uso come tale qui.

105
00:07:51,500 --> 00:07:55,405
Dopo aver apportato le modifiche al

106
00:07:55,405 --> 00:08:02,230
file dish.ts come questo qui e poi anche aggiunto nella classe di commento qui,

107
00:08:02,230 --> 00:08:08,420
ora vediamo che il file dishes.ts non ha più quelle linee rosse perché

108
00:08:08,420 --> 00:08:18,325
il commento è stato aggiunto come array di oggetti alla mia classe di piatti qui.

109
00:08:18,325 --> 00:08:22,470
Quindi, questo funziona bene finora.

110
00:08:22,470 --> 00:08:24,530
Ora, come facciamo a usarlo?

111
00:08:24,530 --> 00:08:25,935
Ora per fare uso di questo,

112
00:08:25,935 --> 00:08:28,755
andremo al menu component.ts,

113
00:08:28,755 --> 00:08:32,050
e poi qui abbiamo questa costante definita qui.

114
00:08:32,050 --> 00:08:34,760
Ora, questo non è il modo giusto per farlo

115
00:08:34,760 --> 00:08:38,845
più tardi, mi vedrai usare un servizio per tutto questo.

116
00:08:38,845 --> 00:08:49,075
Quindi, lasciami tagliare completamente questa costante da qui e invece di usare quella costante,

117
00:08:49,075 --> 00:08:54,880
ora importerò piatti

118
00:08:54,880 --> 00:09:01,600
dalla cartella condivisa

119
00:09:01,600 --> 00:09:07,225
qui, piatti condivisi qui.

120
00:09:07,225 --> 00:09:12,875
Quindi, si noti che questa cartella piatti sta esportando la costante piatti qui.

121
00:09:12,875 --> 00:09:17,250
Quindi, questo è il motivo per cui siamo in grado di farne uso.

122
00:09:17,250 --> 00:09:20,080
Quindi, tornando ai piatti uno qui,

123
00:09:20,080 --> 00:09:22,600
ho bisogno di esportare questo da qui,

124
00:09:22,600 --> 00:09:25,500
quindi direi esportazione.

125
00:09:25,500 --> 00:09:28,285
Costante. Quindi, quando lo faccio,

126
00:09:28,285 --> 00:09:33,985
allora nel mio componente menu posso vedere che i miei piatti possono essere importati qui correttamente.

127
00:09:33,985 --> 00:09:40,150
Quindi, il resto del codice qui funzionerà perfettamente senza alcuna modifica.

128
00:09:40,500 --> 00:09:46,190
Vedrai che se salvi i valori

129
00:09:46,190 --> 00:09:51,190
di tanto in tanto guardi la tua applicazione web nel browser,

130
00:09:51,190 --> 00:09:55,655
verrà resa bene anche dopo queste modifiche.

131
00:09:55,655 --> 00:10:00,110
Dopo aver salvato tutte le modifiche che hai fatto finora in tutti i file,

132
00:10:00,110 --> 00:10:01,810
se vai a guardare la tua pagina web,

133
00:10:01,810 --> 00:10:05,360
la tua pagina web rende proprio come prima.

134
00:10:05,360 --> 00:10:09,025
Ora, la seconda parte del problema.

135
00:10:09,025 --> 00:10:11,390
Vogliamo essere in grado di comunicare.

136
00:10:11,390 --> 00:10:15,640
Quando clicchiamo su una di queste voci di menu,

137
00:10:15,640 --> 00:10:18,415
vogliamo essere in grado di comunicare tali informazioni in modo che

138
00:10:18,415 --> 00:10:21,640
il piatto corrispondente venga reso qui.

139
00:10:21,640 --> 00:10:23,620
Quindi, questo è dove stiamo andando a prendere l'aiuto

140
00:10:23,620 --> 00:10:27,100
del legame dati che abbiamo imparato finora.

141
00:10:27,100 --> 00:10:33,505
Tornando al file modello dei componenti del menu,

142
00:10:33,505 --> 00:10:36,600
quello che faremo è che per

143
00:10:36,600 --> 00:10:41,675
questo «app-dishdetail» che includi in basso qui,

144
00:10:41,675 --> 00:10:48,570
per aggiungere nel modello dei componenti di dettaglio piatto al modello dei componenti del menu,

145
00:10:48,570 --> 00:10:53,440
aggiungeremo una proprietà chiamata come Dish.

146
00:10:53,440 --> 00:10:59,520
Quindi, assegneremo questo per essere «SelectedDish».

147
00:10:59,520 --> 00:11:03,550
Ricorderete che il piatto selezionato è una variabile che abbiamo

148
00:11:03,550 --> 00:11:08,385
definito nei nostri componenti di menu file TypeScript qui.

149
00:11:08,385 --> 00:11:12,020
Quindi, in questo modo; quel valore di quel piatto selezionato

150
00:11:12,020 --> 00:11:15,905
verrà passato attraverso questo piatto di proprietà qui.

151
00:11:15,905 --> 00:11:20,860
Ora, vedremo come il componente dettaglio piatto può recuperare queste informazioni

152
00:11:20,860 --> 00:11:25,670
e poi fare uso di esso bene nella fase successiva dell'esercizio.

153
00:11:25,670 --> 00:11:27,655
Ora, mentre siamo qui,

154
00:11:27,655 --> 00:11:33,345
risolveremo anche l'altro problema che dobbiamo affrontare.

155
00:11:33,345 --> 00:11:40,155
Cioè, quando una qualsiasi delle voci di menu viene cliccato,

156
00:11:40,155 --> 00:11:44,215
allora genererà un evento click e vogliamo che le informazioni da

157
00:11:44,215 --> 00:11:49,475
consegnare al nostro componente di menu file TypeScript.

158
00:11:49,475 --> 00:11:56,960
Quindi, per farlo, andremo in liste griglia di menu che abbiamo definito qui.

159
00:11:56,960 --> 00:11:59,395
Per questa tessera della griglia qui,

160
00:11:59,395 --> 00:12:04,945
quello che ho intenzione di fare è definire l'evento click qui.

161
00:12:04,945 --> 00:12:06,910
Quindi, per l'evento click,

162
00:12:06,910 --> 00:12:11,870
quello che ho intenzione di fare è chiamare il

163
00:12:11,870 --> 00:12:19,005
metodo select che definirò all'interno del mio file component.ts del menu.

164
00:12:19,005 --> 00:12:20,880
Per questo metodo onSelect,

165
00:12:20,880 --> 00:12:25,975
ho intenzione di fornire il piatto come parametro qui.

166
00:12:25,975 --> 00:12:27,315
Cos' è questo piatto?

167
00:12:27,315 --> 00:12:30,670
Questo piatto è esattamente questo piatto che hai selezionato in

168
00:12:30,670 --> 00:12:35,785
questo «piatto di piatti» nella sintassi ngFor qui.

169
00:12:35,785 --> 00:12:38,290
Quindi, quel piatto specifico,

170
00:12:38,290 --> 00:12:41,390
fuori dalla matrice di piatti che hai selezionato qui,

171
00:12:41,390 --> 00:12:45,980
verrà passato come parametro a questo metodo onSelect,

172
00:12:45,980 --> 00:12:50,555
quello che stiamo per implementare nel nostro file component.ts del menu.

173
00:12:50,555 --> 00:12:52,465
Quindi, ora che abbiamo fatto questo,

174
00:12:52,465 --> 00:12:56,175
quindi questo è il gestore che deve essere implementato.

175
00:12:56,175 --> 00:12:59,960
Andiamo al file componente del menu e quindi aggiustare

176
00:12:59,960 --> 00:13:04,195
questo file per implementare questo gestore lì.

177
00:13:04,195 --> 00:13:08,490
Quindi, quando fai un clic su una qualsiasi delle voci di menu,

178
00:13:08,490 --> 00:13:10,695
verrà chiamata la maniglia corrispondente e

179
00:13:10,695 --> 00:13:15,605
le informazioni specifiche del piatto verranno passate come parametro qui.

180
00:13:15,605 --> 00:13:19,790
Andando al file component.ts del menu, ora,

181
00:13:19,790 --> 00:13:25,545
al piatto selezionato verrà assegnato un valore in base al piatto selezionato.

182
00:13:25,545 --> 00:13:29,600
Quindi, ho intenzione di rimuovere quella parte e poi proprio qui sotto,

183
00:13:29,600 --> 00:13:34,660
ho intenzione di implementare il metodo onSelect qui.

184
00:13:34,660 --> 00:13:37,715
Quindi, per il metodo onSelect,

185
00:13:37,715 --> 00:13:45,525
questo otterrà un parametro che è il parametro piatto.

186
00:13:45,525 --> 00:13:47,820
Quando arriva quel parametro piatto,

187
00:13:47,820 --> 00:13:55,705
assegnerò questo selectedDish uguale a dish,

188
00:13:55,705 --> 00:14:02,420
il parametro che è entrato come valore per il metodo onSelect qui.

189
00:14:02,420 --> 00:14:03,895
Quindi, questo è quanto.

190
00:14:03,895 --> 00:14:08,410
Quindi, quando si fa clic su uno qualsiasi di questi elementi nel menu,

191
00:14:08,410 --> 00:14:10,780
uno qualsiasi dei piatti nel menu,

192
00:14:10,780 --> 00:14:15,090
le informazioni sui piatti saranno passate attraverso questo e poi

193
00:14:15,090 --> 00:14:20,670
il piatto selezionato verrà assegnato a quell'oggetto piatto qui.

194
00:14:20,670 --> 00:14:25,415
Ora, abbiamo come le informazioni arrivano dal DOM.

195
00:14:25,415 --> 00:14:29,280
Il clic specifico farà sì che le informazioni del piatto

196
00:14:29,280 --> 00:14:33,875
siano disponibili per noi e al piatto selezionato verrà assegnato quel valore.

197
00:14:33,875 --> 00:14:38,755
Ora, tornando al file HTML componente di menu,

198
00:14:38,755 --> 00:14:45,240
vediamo che abbiamo già assegnato questa proprietà piatto a SelectedDish.

199
00:14:45,240 --> 00:14:48,730
Quindi, in questo modo, quel valore del piatto selezionato viene passato

200
00:14:48,730 --> 00:14:53,980
attraverso questa proprietà del piatto a questo app-dishdetail qui.

201
00:14:53,980 --> 00:14:57,990
Ora, come fa il mio componente di dettaglio piatto a ottenere queste informazioni?

202
00:14:57,990 --> 00:15:02,225
Per questo, andremo al componente dettaglio piatto e sistemarlo.

203
00:15:02,225 --> 00:15:05,185
Andando al componente dettaglio piatto,

204
00:15:05,185 --> 00:15:08,395
la prima cosa che ho intenzione di fare è eliminare

205
00:15:08,395 --> 00:15:13,370
questa costante piatto dal mio componente dettaglio piatto.

206
00:15:13,370 --> 00:15:14,985
Non ne ho più bisogno.

207
00:15:14,985 --> 00:15:18,490
Ora, quando una proprietà viene associata,

208
00:15:18,490 --> 00:15:22,715
come quello che abbiamo visto nel file HTML componente menu,

209
00:15:22,715 --> 00:15:25,900
quindi nel mio file di dettaglio piatto,

210
00:15:25,900 --> 00:15:32,035
posso usare un altro modulo chiamato come modulo di input.

211
00:15:32,035 --> 00:15:35,505
Quindi, per questo piatto,

212
00:15:35,505 --> 00:15:39,555
ho intenzione di dichiararlo semplicemente come DISH.

213
00:15:39,555 --> 00:15:45,095
Ora, questo modulo di input mi permette di dichiarare un decoratore

214
00:15:45,095 --> 00:15:50,905
per questa variabile di piatto che ho definito qui

215
00:15:50,905 --> 00:15:57,800
, come questa, all'ingresso con la parentesi qui a quel piatto qui.

216
00:15:57,800 --> 00:16:01,025
Quindi, anche, ho bisogno di importare

217
00:16:01,025 --> 00:16:10,010
la classe di piatti

218
00:16:10,010 --> 00:16:18,975
dal piatto condiviso qui.

219
00:16:18,975 --> 00:16:24,610
Quindi, con questo, quindi quello che è successo è che sto facendo uso del modulo di input.

220
00:16:24,610 --> 00:16:30,655
Quindi, questo è un modo per fornire informazioni in un componente da un altro componente.

221
00:16:30,655 --> 00:16:33,650
Si associa una proprietà nel modello

222
00:16:33,650 --> 00:16:37,460
dell'altro componente come abbiamo visto nel file component.html del menu,

223
00:16:37,460 --> 00:16:41,550
e quindi che sarà disponibile come input per questo componente

224
00:16:41,550 --> 00:16:47,070
dichiarando una variabile e quindi chiamando il decoratore di input per questo.

225
00:16:47,070 --> 00:16:51,400
Ora, con questo, salviamo le modifiche a tutti i file che abbiamo fatto

226
00:16:51,400 --> 00:16:56,990
e poi diamo un'occhiata alla replica angolare.

227
00:16:56,990 --> 00:17:00,140
Andando al nostro browser,

228
00:17:00,140 --> 00:17:02,260
vediamo che in questa replica angolare,

229
00:17:02,260 --> 00:17:04,000
non viene visualizzato nulla qui.

230
00:17:04,000 --> 00:17:07,470
Perché in questo momento, il piatto selezionato,

231
00:17:07,470 --> 00:17:11,120
non abbiamo selezionato nessuno dei piatti così anche il piatto selezionato

232
00:17:11,120 --> 00:17:14,985
è un oggetto vuoto lì.

233
00:17:14,985 --> 00:17:23,050
Quindi, usiamo il NGIF nel modello per il dettaglio del piatto.

234
00:17:23,050 --> 00:17:27,765
Quindi, dando una rapida occhiata al modello di dettagli del piatto,

235
00:17:27,765 --> 00:17:31,810
hai implementato questo come parte del tuo compito.

236
00:17:31,810 --> 00:17:38,315
Quindi, avresti dovuto usare il NGIF con il piatto sia per il codice,

237
00:17:38,315 --> 00:17:41,400
sia per l'elenco MD lì.

238
00:17:41,400 --> 00:17:44,125
Quindi, se lo fai,

239
00:17:44,125 --> 00:17:47,705
quando il piatto è attualmente deselezionato,

240
00:17:47,705 --> 00:17:50,175
non verrà visualizzato nulla in basso.

241
00:17:50,175 --> 00:17:53,255
Ma nel momento in cui clicco su uno qualsiasi dei piatti,

242
00:17:53,255 --> 00:17:58,005
allora vedi immediatamente i dettagli del piatto visualizzato in basso qui.

243
00:17:58,005 --> 00:18:00,840
Ora posso selezionare il secondo piatto e poi subito,

244
00:18:00,840 --> 00:18:06,000
noterete che i dettagli del piatto visualizzati di seguito sono cambiati.

245
00:18:06,000 --> 00:18:09,090
Quindi, ogni volta che clicco su uno di questi piatti,

246
00:18:09,090 --> 00:18:11,505
i dettagli di quel piatto specifico,

247
00:18:11,505 --> 00:18:15,670
compresi i commenti saranno visualizzati in basso qui.

248
00:18:15,670 --> 00:18:20,710
Quindi, questo è esattamente ciò che vogliamo ottenere in questo particolare esercizio.

249
00:18:20,710 --> 00:18:27,855
Quindi, qui, avete visto l'uso di associazione dati, tre tipi diversi,

250
00:18:27,855 --> 00:18:31,970
tra cui il gestore di eventi e eventi,

251
00:18:31,970 --> 00:18:37,110
e anche avete visto come possiamo fare uso del modulo di input per essere in grado di

252
00:18:37,110 --> 00:18:42,855
recuperare informazioni in un componente proveniente da un altro componente.

253
00:18:42,855 --> 00:18:45,820
Con questo, completiamo questo esercizio,

254
00:18:45,820 --> 00:18:48,750
in cui abbiamo imparato come utilizzare varie

255
00:18:48,750 --> 00:18:56,005
funzionalità di associazione dati disponibili in Angular per implementare la nostra applicazione.

256
00:18:56,005 --> 00:19:02,010
Questo è un buon momento per fare un commit git con l'associazione dei dati del messaggio.