1
00:00:03,680 --> 00:00:10,440
Ora che hai bagnato i piedi con gli osservabili angolari nell'esercizio precedente,

2
00:00:10,440 --> 00:00:11,860
ti stai guardando indietro e dicendo:

3
00:00:11,860 --> 00:00:14,320
«Oh osservabili non sono poi così male,

4
00:00:14,320 --> 00:00:17,070
sono abbastanza semplici da fare uso di».

5
00:00:17,070 --> 00:00:19,125
Quindi, diventiamo un po' piu' ambiziosi.

6
00:00:19,125 --> 00:00:25,080
Andiamo un passo avanti e poi fare uso di un built-in osservabile all'interno Angular.

7
00:00:25,080 --> 00:00:27,960
I parametri osservabili che provengono dal

8
00:00:27,960 --> 00:00:32,655
servizio di route attivato all'interno del nostro modulo router.

9
00:00:32,655 --> 00:00:35,940
Ora aggiorneremo il componente dettaglio piatto,

10
00:00:35,940 --> 00:00:39,630
per fare uso dei parametri osservabili dal

11
00:00:39,630 --> 00:00:42,770
servizio di siccità attivatore per

12
00:00:42,770 --> 00:00:47,975
supportare alcune nuove funzionalità all'interno della nostra applicazione Angular.

13
00:00:47,975 --> 00:00:52,400
Prima di passare ad aggiornare il componente dettaglio piatto,

14
00:00:52,400 --> 00:00:57,650
voglio introdurre un altro metodo nel mio file dish service.ts.

15
00:00:57,650 --> 00:01:02,735
Quindi aprire il file dish service.ts e poi aggiungeremo un nuovo metodo chiamato

16
00:01:02,735 --> 00:01:08,060
getDishIds e questo fondamentalmente

17
00:01:08,060 --> 00:01:14,715
restituirà tutti gli ID del piatto è per tutti i piatti della nostra collezione di piatti.

18
00:01:14,715 --> 00:01:17,650
Quindi, per farlo, useremo un ritorno

19
00:01:17,650 --> 00:01:26,535
e di metodo e prima di farlo,

20
00:01:26,535 --> 00:01:31,915
questo sta restituendo un osservabile.

21
00:01:31,915 --> 00:01:33,480
Di che tipo?

22
00:01:33,480 --> 00:01:38,690
Questo sta restituendo un osservabile che consiste in una matrice di

23
00:01:38,690 --> 00:01:44,510
stringa e ritardiamo

24
00:01:44,510 --> 00:01:50,385
di 2.000 millisecondi o due secondi.

25
00:01:50,385 --> 00:01:52,415
Allora, cos'e' che vogliamo restituire?

26
00:01:52,415 --> 00:01:54,895
Vogliamo prendere l'array piatti,

27
00:01:54,895 --> 00:01:58,730
estrarre tutti gli ID dalla matrice piatti e

28
00:01:58,730 --> 00:02:02,665
poi darlo al nostro componente Dish Detail,

29
00:02:02,665 --> 00:02:06,305
perché abbiamo bisogno che all'interno del nostro componente Dish Detail per implementare

30
00:02:06,305 --> 00:02:10,365
la nuova funzionalità che stiamo andando a supportare nella nostra applicazione.

31
00:02:10,365 --> 00:02:13,725
Ora, questo è un modo in cui voglio implementarlo.

32
00:02:13,725 --> 00:02:18,825
Più tardi, possiamo vedere come possiamo farlo in un modo molto migliore,

33
00:02:18,825 --> 00:02:21,240
in uno degli esercizi successivi.

34
00:02:21,240 --> 00:02:24,680
Al momento, con il modo in cui il servizio è implementato,

35
00:02:24,680 --> 00:02:32,455
questo è il meglio che ho potuto fare per implementare questa soluzione per dimostrare una nuova funzionalità.

36
00:02:32,455 --> 00:02:33,850
Quindi, all'interno dell'osservabile,

37
00:02:33,850 --> 00:02:35,050
quello che ho intenzione di fare è,

38
00:02:35,050 --> 00:02:40,070
ho intenzione di prendere l'array di piatti e alla matrice di piatti.

39
00:02:40,070 --> 00:02:43,770
Ho intenzione di utilizzare la mappa,

40
00:02:44,020 --> 00:02:49,670
un operatore di array, la mappa dell'operatore di array JavaScript.

41
00:02:49,670 --> 00:02:51,410
Quindi, l'operatore della mappa,

42
00:02:51,410 --> 00:02:58,700
come funziona è che prende ogni elemento dall'array di piatti e possiamo mappare

43
00:02:58,700 --> 00:03:01,760
quell'elemento in un altro elemento e quindi costruire

44
00:03:01,760 --> 00:03:06,195
un altro array e quindi restituire quell'array modificato.

45
00:03:06,195 --> 00:03:10,520
Quindi, per ogni elemento nel mio array di piatti,

46
00:03:10,520 --> 00:03:14,315
prenderò quell'elemento e poi

47
00:03:14,315 --> 00:03:20,510
estrarrò l'ID del piatto e poi dall'ID del piatto.

48
00:03:20,510 --> 00:03:25,880
Quindi, finirò per costruire un nuovo array fuori di esso,

49
00:03:25,880 --> 00:03:28,420
che contiene solo gli ID,

50
00:03:28,420 --> 00:03:33,515
quindi una matrice di ID e vediamo già che gli ID sono stringa,

51
00:03:33,515 --> 00:03:37,920
questo è quello che ho intenzione di restituire dal mio ID piatto qui.

52
00:03:37,920 --> 00:03:41,500
Questo è tutto, l'operatore di array di mappe.

53
00:03:41,500 --> 00:03:44,800
Se si cerca operatori di array JavaScript,

54
00:03:44,800 --> 00:03:47,760
si vedrà cosa fa l'operatore di array di mappe.

55
00:03:47,760 --> 00:03:50,540
Infatti, l'operatore map array è anche

56
00:03:50,540 --> 00:03:53,240
interessante dal punto di vista degli osservabili,

57
00:03:53,240 --> 00:03:55,910
perché un osservabile come hai visto,

58
00:03:55,910 --> 00:03:58,950
può anche essere visto come un array,

59
00:03:58,950 --> 00:04:00,805
un flusso di valori,

60
00:04:00,805 --> 00:04:02,330
che può essere visto come un array.

61
00:04:02,330 --> 00:04:05,560
Quindi, l'operatore della mappa può essere utilizzato anche negli osservabili.

62
00:04:05,560 --> 00:04:11,935
Ma in questo momento, lo sto usando semplicemente come operatore di array JavaScript.

63
00:04:11,935 --> 00:04:13,660
Salviamo le modifiche.

64
00:04:13,660 --> 00:04:20,815
Ora, andremo al componente dettaglio piatto e quindi aggiornare il componente dettaglio piatto.

65
00:04:20,815 --> 00:04:23,129
Ora, all'interno del componente dettaglio del piatto,

66
00:04:23,129 --> 00:04:24,790
insieme

67
00:04:24,790 --> 00:04:29,940
al piatto, dichiarerò una variabile chiamata dishIds,

68
00:04:29,940 --> 00:04:32,755
che è una matrice di stringa.

69
00:04:32,755 --> 00:04:36,470
Questo DishID memorizzerà tutti gli ID di

70
00:04:36,470 --> 00:04:42,225
tutti i piatti che sono nella mia collezione di piatti nel mio menu.

71
00:04:42,225 --> 00:04:45,410
Quindi, avrò anche

72
00:04:45,640 --> 00:04:53,490
altre due variabili chiamate precedente e successiva della stringa di tipo.

73
00:04:53,490 --> 00:04:55,215
Ora, perché ho bisogno di questi?

74
00:04:55,215 --> 00:04:56,980
Diventerà un po 'più chiaro,

75
00:04:56,980 --> 00:04:58,790
una volta implementata la vista,

76
00:04:58,790 --> 00:05:00,560
dove farò uso di questo.

77
00:05:00,560 --> 00:05:04,480
Ora, quello che farò qui è che,

78
00:05:04,480 --> 00:05:10,610
all'interno del mio ngInit in precedenza,

79
00:05:10,610 --> 00:05:18,800
abbiamo lasciato che id sia uguale a più questo ID di parametri route.snapshot.

80
00:05:18,800 --> 00:05:22,565
Quando l'ho fatto nell'esercizio precedente,

81
00:05:22,565 --> 00:05:28,580
non ti ho spiegato cosa stava facendo l'istantanea e perché lo stiamo facendo in questo modo?

82
00:05:28,580 --> 00:05:31,490
Perché era necessario comprendere gli osservabili,

83
00:05:31,490 --> 00:05:34,060
prima di capire cosa significa l'istantanea.

84
00:05:34,060 --> 00:05:43,940
Ora, in Angular, il servizio di route attivato fornisce una serie di osservabili.

85
00:05:43,940 --> 00:05:46,775
Uno degli osservabili è chiamato params.

86
00:05:46,775 --> 00:05:48,860
Ciò che questo parametro ci fornisce

87
00:05:48,860 --> 00:05:56,030
è un modo per ottenere i valori dei parametri all'interno del mio URL.

88
00:05:56,030 --> 00:06:00,170
Quindi, hai visto che quando introduci i parametri del percorso,

89
00:06:00,170 --> 00:06:03,605
hai introdotto uno dei parametri del percorso come ID dei due punti.

90
00:06:03,605 --> 00:06:07,590
Tale ID dei due punti diventa disponibile come osservabile.

91
00:06:07,590 --> 00:06:10,330
Quindi, ogni volta che quel valore cambia,

92
00:06:10,330 --> 00:06:15,745
puoi osservare i cambiamenti in quel valore e quindi agire in modo corrispondente.

93
00:06:15,745 --> 00:06:21,010
Ma, prima quando abbiamo implementato la componente di dettaglio piatto,

94
00:06:21,010 --> 00:06:22,825
non sapevamo degli osservabili.

95
00:06:22,825 --> 00:06:26,200
Quindi, non riuscivo a spiegare cosa stava facendo l'istantanea a quel punto.

96
00:06:26,200 --> 00:06:30,460
Ora, lasciatemi tornare indietro e spiegare esattamente cosa fa l'istantanea.

97
00:06:30,460 --> 00:06:32,870
Quando usiamo questo come istantanea qui,

98
00:06:32,870 --> 00:06:34,250
quello che stiamo facendo è,

99
00:06:34,250 --> 00:06:37,580
stiamo prendendo una istantanea

100
00:06:37,580 --> 00:06:40,250
dal servizio di route e quindi stiamo ottenendo

101
00:06:40,250 --> 00:06:43,605
il parametro osservabile in quel particolare punto del tempo.

102
00:06:43,605 --> 00:06:46,310
Il valore dei parametri in quel particolare punto del

103
00:06:46,310 --> 00:06:49,340
tempo e quindi utilizzarlo all'interno della nostra applicazione.

104
00:06:49,340 --> 00:06:51,730
Anche se questo non è il modo ideale per farlo.

105
00:06:51,730 --> 00:06:55,010
Invece, quindi facciamo uso

106
00:06:55,010 --> 00:06:59,990
direttamente dell'osservabile e quindi rispondiamo ogni volta che cambia osservabile.

107
00:06:59,990 --> 00:07:04,650
Quindi, come aggiorniamo questo codice per utilizzare direttamente l'osservabile?

108
00:07:04,650 --> 00:07:08,030
Quindi, quello che ci rendiamo conto è che dal servizio di rotta attivato,

109
00:07:08,030 --> 00:07:10,390
abbiamo i parametri osservabili a nostra disposizione.

110
00:07:10,390 --> 00:07:13,070
Quindi, faremo uso dei parametri osservabili e

111
00:07:13,070 --> 00:07:16,755
ogni volta che c'è un cambiamento in cui i parametri osservabili,

112
00:07:16,755 --> 00:07:22,750
possiamo avviare un cambiamento all'interno del nostro componente DishDetail.

113
00:07:22,750 --> 00:07:25,820
Permettetemi di illustrarvi come faremo uso

114
00:07:25,820 --> 00:07:28,935
dei parametri osservabili aggiornando questo codice.

115
00:07:28,935 --> 00:07:30,735
Quindi, andando a questo codice,

116
00:07:30,735 --> 00:07:32,630
quello che sto per fare ora,

117
00:07:32,630 --> 00:07:37,615
è che ho intenzione di cambiare questo in dire,

118
00:07:37,615 --> 00:07:42,950
«Ho questo percorso e da questo percorso,

119
00:07:42,950 --> 00:07:45,640
ho già i parametri disponibili.»

120
00:07:45,640 --> 00:07:50,030
Quindi, ho intenzione di rimuovere l'istantanea e uso i parametri.

121
00:07:50,030 --> 00:07:52,060
Quindi, con questi parametri,

122
00:07:52,060 --> 00:08:00,410
quello che ho ora è l'accesso ai parametri osservabili.

123
00:08:00,410 --> 00:08:03,235
Ora, dal momento che abbiamo questi parametri osservabili,

124
00:08:03,235 --> 00:08:09,545
ho intenzione di usare un operatore su questo parametri osservabili e quindi modificato.

125
00:08:09,545 --> 00:08:17,275
Quindi, l'operatore che ho intenzione di utilizzare si chiama operatore SwitchMap.

126
00:08:17,275 --> 00:08:21,050
L' operatore SwitchMap mi consente

127
00:08:21,050 --> 00:08:26,230
di utilizzare i parametri osservabili e si vede la linea rossa ondulata che significa,

128
00:08:26,230 --> 00:08:31,590
che ho bisogno di importare lo SwitchMap osservabile qui.

129
00:08:31,590 --> 00:08:34,320
Quindi, andrò ai

130
00:08:34,320 --> 00:08:39,660
miei input qui e

131
00:08:39,660 --> 00:08:45,880
poi inserirò rxjs e operatore.

132
00:08:49,640 --> 00:08:52,710
Quindi, dai parametri osservabili,

133
00:08:52,710 --> 00:08:57,740
ottengo parametri che sono del tipo Params.

134
00:08:57,740 --> 00:09:05,700
Quindi, ricorda che abbiamo importato i parametri dalla libreria del router qui.

135
00:09:05,700 --> 00:09:07,520
Quindi, abbiamo implorato i parametri qui,

136
00:09:07,520 --> 00:09:12,289
dalla libreria del router e anche abbiamo importato il servizio di route di attivazione qui,

137
00:09:12,289 --> 00:09:15,800
e poi li abbiamo resi disponibili all'interno del nostro costruttore qui,

138
00:09:15,800 --> 00:09:18,225
attraverso il percorso dell'attivatore.

139
00:09:18,225 --> 00:09:25,055
Quindi, è per questo che siamo in grado di fare questo percorso parametri per entrare in possesso dei parametri osservabili.

140
00:09:25,055 --> 00:09:27,740
Userò l'operatore SwitchMap sui parametri

141
00:09:27,740 --> 00:09:34,049
osservabili e poi quando ottengo i parametri osservabili,

142
00:09:34,049 --> 00:09:44,880
quello che farò è prenderlo e poi dire, questo DishService.

143
00:09:45,030 --> 00:09:54,370
GetDish, e quindi questo ID ora dovrebbe essere ottenuto usando i parametri.

144
00:09:54,370 --> 00:09:58,600
Vedi il parametro che abbiamo lì.

145
00:09:58,600 --> 00:10:04,765
Dai parametri, dirò tra parentesi ID.

146
00:10:04,765 --> 00:10:11,490
Quindi, quello che succede è che ogni volta che i parametri osservabili cambiano il valore,

147
00:10:11,490 --> 00:10:17,680
il che significa che il parametro route cambia valore, quindi immediatamente,

148
00:10:17,680 --> 00:10:20,900
l'operatore della mappa di commutazione prenderà il valore dei parametri

149
00:10:20,900 --> 00:10:25,320
e quindi eseguirà un getDish dal mio DishService.

150
00:10:25,320 --> 00:10:27,060
Quindi, questo sarebbe avviato automaticamente,

151
00:10:27,060 --> 00:10:31,280
e questo sarà disponibile come l'altro

152
00:10:31,280 --> 00:10:36,900
osservabile che viene emesso facendo questo operatore mappa interruttore su questo osservabile.

153
00:10:36,900 --> 00:10:41,580
Quindi, stiamo creando un nuovo osservabile che è il GetDish,

154
00:10:41,580 --> 00:10:45,820
che sta per restituire l'oggetto piatto qui.

155
00:10:45,820 --> 00:10:49,285
Ora, una volta ottenuto il GetDish lì,

156
00:10:49,285 --> 00:10:53,350
allora questo può ora essere disponibile come osservabile.

157
00:10:53,350 --> 00:10:57,700
Mi iscrivo solo a quell'osservabile usando la sottoscrizione qui.

158
00:10:57,700 --> 00:10:59,815
Poi, lì ottengo il piatto.

159
00:10:59,815 --> 00:11:03,930
Questo piatto si ottiene facendo questo GetDish qui.

160
00:11:03,930 --> 00:11:08,790
Quel piatto, allora posso fare uso per mapparlo nella

161
00:11:08,790 --> 00:11:14,025
mia variabile piatto che ho dichiarato prima.

162
00:11:14,025 --> 00:11:17,790
Quindi, in questo modo, il mio piatto viene aggiornato.

163
00:11:17,790 --> 00:11:20,775
Quindi, ogni volta che i parametri osservabili cambiano,

164
00:11:20,775 --> 00:11:24,210
il mio piatto verrà aggiornato al nuovo piatto.

165
00:11:24,210 --> 00:11:27,590
Quindi, nota come sto prendendo un osservabile, i parametri osservabili,

166
00:11:27,590 --> 00:11:33,050
e poi sto mappando i parametri osservabili in un altro osservabile che sta fondamentalmente

167
00:11:33,050 --> 00:11:40,675
andando a recuperare il valore del piatto dal mio DishService,

168
00:11:40,675 --> 00:11:42,955
e quindi rendendolo disponibile come osservabile.

169
00:11:42,955 --> 00:11:48,010
Quindi, mi sto sottoscrivendo a quell'osservabile qui, e quindi,

170
00:11:48,010 --> 00:11:49,780
sto ottenendo il valore del piatto qui,

171
00:11:49,780 --> 00:11:52,720
e poi sto mappando il valore del piatto o meglio

172
00:11:52,720 --> 00:11:56,795
rendendo la variabile del piatto uguale al valore del piatto qui.

173
00:11:56,795 --> 00:12:00,415
Si noti come usando gli osservabili,

174
00:12:00,415 --> 00:12:04,865
ora si è in grado di prendere uno osservabile quindi mapparlo in un altro osservabile.

175
00:12:04,865 --> 00:12:06,730
Perché è interessante?

176
00:12:06,730 --> 00:12:12,680
Se ora, ho un modo per modificare quel parametro di percorso,

177
00:12:12,680 --> 00:12:19,005
allora sarò in grado di passare da un piatto all'altro e vedere i diversi piatti.

178
00:12:19,005 --> 00:12:22,100
Sfortunatamente, non ce l'ho.

179
00:12:22,100 --> 00:12:25,735
Quindi, ho bisogno di modificare i componenti del piatto per consentirmi di farlo.

180
00:12:25,735 --> 00:12:31,545
Ora, questo è dove includerò un paio di pulsanti nella mia vista che quando clicco,

181
00:12:31,545 --> 00:12:36,390
sarò in grado di navigare attraverso la mia lista di piatti.

182
00:12:36,390 --> 00:12:38,960
Ora, per essere in grado di navigare nella mia lista di piatti,

183
00:12:38,960 --> 00:12:42,005
ho bisogno di conoscere il set di tutti i miei piatti,

184
00:12:42,005 --> 00:12:45,525
o almeno ho bisogno di conoscere i documenti di tutti i miei piatti.

185
00:12:45,525 --> 00:12:51,410
Questo e' il motivo per cui uso questo DishID qui, ok?

186
00:12:51,410 --> 00:12:58,800
Quindi, ora capisci perché ho incluso il metodo dishID nel mio DishService.

187
00:12:58,800 --> 00:13:01,455
Quindi, poi comincio io.

188
00:13:01,455 --> 00:13:05,830
Ho intenzione di ottenere prima

189
00:13:05,830 --> 00:13:10,510
i DishID

190
00:13:10,510 --> 00:13:16,970
chiamando il

191
00:13:17,070 --> 00:13:22,570
metodo DishService, getDishIds a quel punto.

192
00:13:22,570 --> 00:13:25,735
Sto ancora lavorando con il vecchio modo di fare le cose.

193
00:13:25,735 --> 00:13:34,795
Devo rendermi conto che questo getDishIds sta inviando in osservabile.

194
00:13:34,795 --> 00:13:39,365
Quindi, ho bisogno di iscrivermi a quell'osservabile.

195
00:13:39,365 --> 00:13:43,910
Vedete come è necessario cambiare il vostro modo di pensare

196
00:13:43,910 --> 00:13:48,340
quando si opera con le variabili qui.

197
00:13:48,340 --> 00:13:52,840
Quindi, diremo dishIds iscriversi,

198
00:13:52,840 --> 00:13:54,935
e all'interno della sottoscrizione,

199
00:13:54,935 --> 00:14:00,990
otterremo il parametro che è un array di stringhe,

200
00:14:00,990 --> 00:14:04,170
e poi direi proprio lì,

201
00:14:04,170 --> 00:14:09,970
dishID sarà uguale a dishIds.

202
00:14:09,970 --> 00:14:14,085
Vedi, quanto è facile

203
00:14:14,085 --> 00:14:18,510
cambiare il tuo modo di pensare quando vuoi avere a che fare con un osservabile.

204
00:14:18,510 --> 00:14:20,895
Quindi, il getDishIds sta inviando un osservabile,

205
00:14:20,895 --> 00:14:26,790
e mi sto iscrivendo a quell'osservabile e poi ho i DISHID qui disponibili.

206
00:14:26,790 --> 00:14:29,130
Quindi, anche sottoscrivendo il parametro.

207
00:14:29,130 --> 00:14:31,500
Se posso cambiare il mio parametro,

208
00:14:31,500 --> 00:14:35,340
valore valore del parametro percorso all'interno del mio codice,

209
00:14:35,340 --> 00:14:38,300
allora sarò in grado di navigare tra i piatti.

210
00:14:38,300 --> 00:14:41,240
Quindi, implementiamo quella parte.

211
00:14:41,240 --> 00:14:43,810
Sta diventando interessante.

212
00:14:43,810 --> 00:14:47,515
Quindi, per consentirmi di farlo,

213
00:14:47,515 --> 00:14:53,190
quindi introdurrò un altro metodo qui chiamato setPrevNext,

214
00:14:55,770 --> 00:15:03,480
e a questo, invierò un parametro dishId.

215
00:15:03,480 --> 00:15:06,295
Ora, dato il mio attuale dishId,

216
00:15:06,295 --> 00:15:11,355
volevo essere in grado di trovare il precedente e il successivo dishId in modo da poter implementare la

217
00:15:11,355 --> 00:15:17,545
mia navigazione tra i piatti all'interno del mio componente dishdetail.

218
00:15:17,545 --> 00:15:22,635
Quindi, questo è il motivo per cui ho dichiarato il prev e il prossimo.

219
00:15:22,635 --> 00:15:25,555
Ora, ho bisogno di essere in grado di inizializzare questi due valori.

220
00:15:25,555 --> 00:15:28,650
Tutto quello che so ora è il mio attuale dishId.

221
00:15:28,650 --> 00:15:30,610
Quindi, usando l'attuale dishId,

222
00:15:30,610 --> 00:15:34,265
voglio essere in grado di trovare il precedente e il successivo dishId.

223
00:15:34,265 --> 00:15:36,080
Quindi, in questo metodo,

224
00:15:36,080 --> 00:15:40,255
ho intenzione di fare il precedente e il prossimo dishId.

225
00:15:40,255 --> 00:15:42,160
Quindi, qui dirò,

226
00:15:42,160 --> 00:15:50,200
lascia indice uguale a questo DishId.

227
00:15:50,200 --> 00:15:52,900
Ora, conosco solo l'identificazione del mio piatto,

228
00:15:52,900 --> 00:15:55,360
ma l'identificazione del mio piatto non mi dà tutto.

229
00:15:55,360 --> 00:16:00,980
Devo essere in grado di trovare il piatto in questa serie di ID,

230
00:16:00,980 --> 00:16:06,510
quindi è per questo che sto dicendo questo dishIds e indexOf.

231
00:16:06,510 --> 00:16:13,640
Dovresti conoscere l'operatore indexOf su un array JavaScript.

232
00:16:13,640 --> 00:16:20,935
L' operatore indexOf accetta un valore e quindi trova l'indice di tale valore nella matrice.

233
00:16:20,935 --> 00:16:27,605
Quindi, indexOf e il parametro qui,

234
00:16:27,605 --> 00:16:29,945
darò è il dishId,

235
00:16:29,945 --> 00:16:34,765
il dishId che otterrò in breve tempo.

236
00:16:34,765 --> 00:16:38,765
Ora, una volta ottenuto l'indice di questo valore corrente,

237
00:16:38,765 --> 00:16:42,385
posso quindi mappare

238
00:16:42,385 --> 00:16:49,420
i due DishID precedenti.

239
00:16:49,420 --> 00:16:59,080
Quindi, questo è dove

240
00:16:59,080 --> 00:17:08,980
farò un po 'di codice complicato qui che mi permetterà di avvolgermi quando sono.

241
00:17:08,980 --> 00:17:15,030
Quindi, si noti che questo array DishID contiene un certo numero di valori lì.

242
00:17:15,030 --> 00:17:20,270
Se il mio valore corrente del mio dishId è il primo elemento,

243
00:17:20,270 --> 00:17:24,565
il valore precedente sarà l'elemento indicizzato zeroth nel mio array.

244
00:17:24,565 --> 00:17:26,590
Ma se il mio valore attuale è l'elemento zeroth,

245
00:17:26,590 --> 00:17:28,235
il primo elemento nel mio array,

246
00:17:28,235 --> 00:17:32,530
allora voglio avvolgermi per ottenere l'ultimo elemento nel mio array.

247
00:17:32,530 --> 00:17:36,770
Quindi, questo è dove faccio uso dell'operatore modulo con

248
00:17:36,770 --> 00:17:42,235
qualche modo matematico di avvolgere le cose in giro.

249
00:17:42,235 --> 00:17:44,275
Quindi, direi questo dishId

250
00:17:44,275 --> 00:18:14,500
più indice meno uno, e modulo la lunghezza di questo DishId.

251
00:18:14,500 --> 00:18:15,925
Quindi, quello che sto facendo è,

252
00:18:15,925 --> 00:18:19,590
il valore precedente sarà l'indice corrente, l'

253
00:18:19,590 --> 00:18:21,735
indice del valore corrente,

254
00:18:21,735 --> 00:18:25,935
più la lunghezza dei piatti meno uno.

255
00:18:25,935 --> 00:18:27,815
Ora, se l'indice è uno,

256
00:18:27,815 --> 00:18:29,585
indice meno uno mi darà zero.

257
00:18:29,585 --> 00:18:30,680
Se l'indice è zero,

258
00:18:30,680 --> 00:18:32,670
indice meno uno mi darà meno uno,

259
00:18:32,670 --> 00:18:34,210
ma non è quello che voglio.

260
00:18:34,210 --> 00:18:38,190
Voglio avvolgermi e ottenere la lunghezza dishId meno uno.

261
00:18:38,190 --> 00:18:41,870
Quindi, è per questo che sto includendo questo lì dentro,

262
00:18:41,870 --> 00:18:44,995
e poi facendo un modulo con i DISHID.

263
00:18:44,995 --> 00:18:47,660
Quindi, quando l'indice è zero,

264
00:18:47,660 --> 00:18:51,915
mi avvolgerò per ottenere l'ultimo elemento nel mio array.

265
00:18:51,915 --> 00:18:56,965
Quindi, è così che inizializzo il valore precedente.

266
00:18:56,965 --> 00:18:59,120
Quindi, il valore successivo,

267
00:18:59,120 --> 00:19:02,700
userò lo stesso approccio,

268
00:19:02,770 --> 00:19:08,205
ma avvolgerò dicendo indice più uno.

269
00:19:08,205 --> 00:19:11,780
Quindi, se sono attualmente all'ultimo elemento dell'array,

270
00:19:11,780 --> 00:19:14,200
allora voglio avvolgermi a zero.

271
00:19:14,200 --> 00:19:16,715
Quindi, questa e' l'altra parte di quello che sto facendo.

272
00:19:16,715 --> 00:19:19,200
Quindi, lì, sto impostando il precedente e il successivo.

273
00:19:19,200 --> 00:19:21,795
Quindi, quando dovrei impostare il precedente e il successivo?

274
00:19:21,795 --> 00:19:23,965
Ogni volta che il mio piatto cambia,

275
00:19:23,965 --> 00:19:27,630
devo essere in grado di iniziare una chiamata a questo.

276
00:19:27,630 --> 00:19:30,590
Ora, dove sto cambiando il valore del mio piatto?

277
00:19:30,590 --> 00:19:34,365
Guardando indietro l'iscrizione qui,

278
00:19:34,365 --> 00:19:35,905
nota che proprio lì,

279
00:19:35,905 --> 00:19:40,180
stai cambiando il tuo piatto ogni volta che il nostro parametro cambia.

280
00:19:40,180 --> 00:19:42,035
Quindi, a quel punto,

281
00:19:42,035 --> 00:19:45,495
voglio ripristinare il mio valore precedente e successivo.

282
00:19:45,495 --> 00:19:51,940
Quindi, ho intenzione di cambiare questo in un blocco di codice qui.

283
00:19:51,940 --> 00:19:57,250
Quindi, direi questo setPrevNext,

284
00:19:57,250 --> 00:20:02,170
e quindi il parametro sarebbe dishId.

285
00:20:04,370 --> 00:20:07,970
Questo è tutto. Quindi, con questo cambiamento,

286
00:20:07,970 --> 00:20:11,155
quello che succede è che ogni volta che il mio piatto viene aggiornato,

287
00:20:11,155 --> 00:20:17,085
aggiornerò il precedente e il successivo anche corrispondentemente da qui.

288
00:20:17,085 --> 00:20:19,605
Quindi, con questo piccolo cambiamento,

289
00:20:19,605 --> 00:20:23,150
il mio DishID sarà il piatto attuale.

290
00:20:23,150 --> 00:20:25,530
Il precedente punterà al piatto precedente

291
00:20:25,530 --> 00:20:28,690
e il successivo sarà puntato al successivo dishId.

292
00:20:28,690 --> 00:20:31,565
Quindi, ho tutti e tre i quali mi servono.

293
00:20:31,565 --> 00:20:37,460
Ora, posso fare uso di questi tre valori per implementare il modo di navigare

294
00:20:37,460 --> 00:20:43,325
tra i piatti nel mio modello includendo un paio di pulsanti nel mio modello.

295
00:20:43,325 --> 00:20:48,775
Quindi, andiamo al modello di componenti dishdetail,

296
00:20:48,775 --> 00:20:53,569
e quindi includiamo un paio di pulsanti che mi permettono di navigare tra i piatti.

297
00:20:53,569 --> 00:20:58,535
Andando al componente Dish Detail mentre sono qui,

298
00:20:58,535 --> 00:21:06,150
lasciami prendere questo NGif da questa carta e poi spostarlo nel div lassù.

299
00:21:06,150 --> 00:21:08,445
Voglio nascondere l'intero div,

300
00:21:08,445 --> 00:21:10,850
quando il mio piatto non è attualmente difetto,

301
00:21:10,850 --> 00:21:13,515
allo stesso modo per i commenti anche.

302
00:21:13,515 --> 00:21:16,440
Trovo che questo sia un po 'fastidioso

303
00:21:16,440 --> 00:21:19,700
quando le informazioni del mio piatto vengono recuperate dal server.

304
00:21:19,700 --> 00:21:24,945
Quindi, farò questa modifica per entrambi i due div che

305
00:21:24,945 --> 00:21:32,810
uno mostra i commenti e l'altro che mostra i dettagli del piatto nella scheda.

306
00:21:32,810 --> 00:21:35,170
Con questi due aggiornamenti,

307
00:21:35,170 --> 00:21:37,210
all'interno delle mie azioni della carta,

308
00:21:37,210 --> 00:21:38,605
includerò

309
00:21:38,605 --> 00:21:49,165
un altro pulsante di tipo pulsante ovviamente e questo pulsante,

310
00:21:49,165 --> 00:21:55,165
includerò il RouterLink.

311
00:21:55,165 --> 00:21:57,320
Nel momento in cui vedi il collegamento del router

312
00:21:57,320 --> 00:21:58,775
, dici subito: «Oh,

313
00:21:58,775 --> 00:22:00,620
so cosa stai cercando di fare.

314
00:22:00,620 --> 00:22:04,890
Stai cercando di convertire questo pulsante per essere in grado di navigare tra

315
00:22:04,890 --> 00:22:11,720
i diversi componenti all'interno del mio servizio.»

316
00:22:11,720 --> 00:22:14,000
Quindi, per il RouterLink,

317
00:22:14,000 --> 00:22:22,870
ho intenzione di fornire una matrice di valori e la matrice di valori per il RouterLink,

318
00:22:22,870 --> 00:22:27,135
ho intenzione di fare dishdetail.

319
00:22:27,135 --> 00:22:30,665
Inoltre, la seconda parte.

320
00:22:30,665 --> 00:22:33,330
Vedi, questa e' la parte interessante.

321
00:22:33,330 --> 00:22:37,125
La seconda parte di questo array sarà prev,

322
00:22:37,125 --> 00:22:43,090
che è la variabile che ho dichiarato nel mio componente.

323
00:22:43,090 --> 00:22:52,905
Quindi, con questo, questo pulsante diventerà un link al piatto precedente nella mia lista di piatti.

324
00:22:52,905 --> 00:22:55,615
Spiffy, giusto?

325
00:22:55,615 --> 00:23:01,010
Quindi, con quello, cos'altro?

326
00:23:02,010 --> 00:23:07,550
Lasciatemi chiudere il pulsante qui e poi all'interno del pulsante,

327
00:23:07,550 --> 00:23:16,890
Ho intenzione di utilizzare un carattere impressionante icona

328
00:23:22,360 --> 00:23:26,550
fa chevron-left.

329
00:23:32,670 --> 00:23:37,935
Quindi, questo è tutto. Questo pulsante sarà un pulsante con un'icona lì.

330
00:23:37,935 --> 00:23:40,605
Quindi, ora abbiamo un pulsante qui,

331
00:23:40,605 --> 00:23:43,465
ho anche intenzione di includere un altro pulsante qui.

332
00:23:43,465 --> 00:23:44,880
Prima di includere il pulsante,

333
00:23:44,880 --> 00:23:50,330
farò span class flex-spacer,

334
00:23:50,330 --> 00:23:55,210
mi hai visto usare il flex-spacer in uno degli esercizi precedenti.

335
00:23:55,210 --> 00:23:56,855
Quindi, vedi cosa sto facendo,

336
00:23:56,855 --> 00:24:00,695
sto allungando per includere il secondo pulsante.

337
00:24:00,695 --> 00:24:02,270
Quindi, per il secondo pulsante,

338
00:24:02,270 --> 00:24:05,040
ho intenzione di copiare questo

339
00:24:06,780 --> 00:24:13,190
e poi incollarlo lì e quindi aggiornare questo per dire prev.

340
00:24:13,190 --> 00:24:16,730
Invece di precedente, andrò dopo e poi

341
00:24:16,730 --> 00:24:23,335
fa-chevron-sinistra a fa-chevron-destra, e questo è tutto.

342
00:24:23,335 --> 00:24:28,049
Salviamo le modifiche ai nostri componenti Dish Detail

343
00:24:28,049 --> 00:24:30,760
e anche i file rimanenti.

344
00:24:30,760 --> 00:24:35,340
Dopo questo aggiornamento, andiamo a controllare cosa fa la nostra applicazione.

345
00:24:35,340 --> 00:24:38,065
Andando alla mia applicazione nel browser,

346
00:24:38,065 --> 00:24:40,500
andiamo al componente Menu.

347
00:24:40,500 --> 00:24:46,240
Vediamo il menu e selezioniamo una voce dal menu qui.

348
00:24:46,240 --> 00:24:53,270
Quindi, si noti che ora questa voce dal piatto del menu è visualizzata qui.

349
00:24:53,270 --> 00:24:55,225
Nota in basso,

350
00:24:55,225 --> 00:24:58,835
abbiamo due pulsanti qui, a sinistra e a destra.

351
00:24:58,835 --> 00:25:01,440
Quando clicchiamo sul pulsante sinistro,

352
00:25:01,440 --> 00:25:08,875
nota come siamo in grado di passare al piatto precedente nell'elenco dei piatti.

353
00:25:08,875 --> 00:25:15,515
Posso continuare a fare di nuovo a sinistra e continuare a navigare a sinistra e a destra.

354
00:25:15,515 --> 00:25:17,980
Si noti che quando lo faccio,

355
00:25:17,980 --> 00:25:22,655
la mia vista effettiva non viene ricaricata,

356
00:25:22,655 --> 00:25:25,190
invece vado solo a recuperare

357
00:25:25,190 --> 00:25:34,955
i dati relativi al piatto dal servizio e quindi ad aggiornare la mia vista qui.

358
00:25:34,955 --> 00:25:38,350
La ragione per cui siamo in grado di farlo è perché

359
00:25:38,350 --> 00:25:43,445
abbiamo l'osservabile, i parametri osservabili.

360
00:25:43,445 --> 00:25:45,890
Quindi, ogni volta che clicco su questi due,

361
00:25:45,890 --> 00:25:48,860
a sinistra e a destra, i parametri osservabili,

362
00:25:48,860 --> 00:25:56,620
nota come in questo momento l'indirizzo mostra dishdetail zero.

363
00:25:56,620 --> 00:25:58,315
Se clicco a destra,

364
00:25:58,315 --> 00:26:02,925
allora che verrà aggiornato da dishdetail zero a dishdetail uno.

365
00:26:02,925 --> 00:26:07,560
Quel parametro cambia, e questo farà sì che il mio osservabile

366
00:26:07,560 --> 00:26:12,245
vada a prendere il nuovo piatto dal servizio di piatti.

367
00:26:12,245 --> 00:26:14,980
Quindi, il nuovo piatto viene recuperato,

368
00:26:14,980 --> 00:26:20,285
la variabile piatto nel mio componente viene aggiornata

369
00:26:20,285 --> 00:26:21,885
e quando viene aggiornata,

370
00:26:21,885 --> 00:26:23,640
anche la mia vista viene aggiornata.

371
00:26:23,640 --> 00:26:28,185
Quindi, notare che sto usando la stessa vista,

372
00:26:28,185 --> 00:26:36,440
sono in grado di navigare tra i vari piatti che fanno parte della mia lista di piatti.

373
00:26:36,440 --> 00:26:42,470
Questa è la parte interessante che puoi ottenere usando i parametri

374
00:26:42,470 --> 00:26:49,250
osservabili dall'activator.service all'interno dell'applicazione Angular.

375
00:26:49,250 --> 00:26:56,355
Modo interessante di fare uso di osservabili bollette nostra applicazione angolare.

376
00:26:56,355 --> 00:26:59,640
Naturalmente, il modo in cui l'ho implementato,

377
00:26:59,640 --> 00:27:03,210
l'ho fatto un po 'un modo artificioso di fare le cose.

378
00:27:03,210 --> 00:27:07,965
Ho dovuto procurarmi la lista dei documenti dei piatti.

379
00:27:07,965 --> 00:27:12,760
Ho dovuto modificare il precedente e il successivo e così via.

380
00:27:12,760 --> 00:27:16,360
Se hai un modo per ottenere

381
00:27:16,360 --> 00:27:20,000
automaticamente il valore precedente e il valore successivo dal tuo servizio,

382
00:27:20,000 --> 00:27:22,015
ogni volta che recuperi un piatto,

383
00:27:22,015 --> 00:27:26,895
l'implementazione del punteggio diventerà un po 'più facile.

384
00:27:26,895 --> 00:27:28,705
In questo momento non ce l'abbiamo.

385
00:27:28,705 --> 00:27:33,430
Quindi, ho risolto il problema perché volevo solo illustrare il modo

386
00:27:33,430 --> 00:27:38,855
di utilizzare un osservabile come questo all'interno della tua applicazione Angular.

387
00:27:38,855 --> 00:27:43,270
Se possiamo implementare il servizio che restituirà il valore

388
00:27:43,270 --> 00:27:47,320
precedente e il valore successivo ogni volta che prendiamo un piatto,

389
00:27:47,320 --> 00:27:53,640
allora tutto questo mal di testa sarà molto più semplicemente risolto.

390
00:27:53,640 --> 00:27:58,810
Ritorniamo l'idea a una fase successiva.

391
00:27:58,810 --> 00:28:01,930
Ma al momento, si vede come stiamo facendo

392
00:28:01,930 --> 00:28:05,250
uso dei parametri osservabili al fine di implementare

393
00:28:05,250 --> 00:28:12,605
un modo interessante di supportare una nuova funzionalità all'interno della nostra applicazione Angular.

394
00:28:12,605 --> 00:28:16,325
Questo completa questo esercizio.

395
00:28:16,325 --> 00:28:24,000
Questo è un buon momento per fare un commit git con il messaggio RXJS Parte due.