1
00:00:00,000 --> 00:00:04,598
[MUSICA]

2
00:00:04,598 --> 00:00:10,170
È ora di passare al terzo incarico in questo corso.

3
00:00:10,170 --> 00:00:13,410
In questo incarico, come si potrebbe già previsto,

4
00:00:13,410 --> 00:00:17,190
vedremo forme angolari e osservabili.

5
00:00:17,190 --> 00:00:22,480
Questo è ciò che abbiamo imparato in questo particolare modulo del corso.

6
00:00:22,480 --> 00:00:28,600
In questo incarico, verrà progettato un modulo

7
00:00:28,600 --> 00:00:33,440
all'interno della vista dei componenti di dettaglio piatto che consentirà

8
00:00:33,440 --> 00:00:38,540
agli utenti di inviare il loro commento su un piatto specifico.

9
00:00:39,640 --> 00:00:45,504
Userai moduli reattivi angolari per progettare il modulo e

10
00:00:45,504 --> 00:00:50,127
userai le modifiche di valore osservabili

11
00:00:50,127 --> 00:00:53,623
per avviare la convalida del modulo,

12
00:00:53,623 --> 00:00:59,147
proprio come abbiamo fatto nell'esercizio che hai appena completato e

13
00:00:59,147 --> 00:01:04,109
userai un nuovo componente materiale angolare chiamato

14
00:01:04,109 --> 00:01:07,747
Materiale angolare Componente di scorrimento.

15
00:01:07,747 --> 00:01:13,987
Il componente slider verrà utilizzato per inserire la valutazione per

16
00:01:13,987 --> 00:01:19,050
il piatto dalla persona che invia il conteggio.

17
00:01:20,230 --> 00:01:24,620
Diamo un'occhiata ai tre compiti in questo compito in modo più dettagliato.

18
00:01:26,410 --> 00:01:31,760
Quindi qui, vi sto mostrando il loro primo piatto dal menu

19
00:01:31,760 --> 00:01:38,510
per illustrarvi i tre compiti che devono essere completati in questo compito.

20
00:01:38,510 --> 00:01:43,238
Quindi, in questo incarico, creeremo un modulo

21
00:01:43,238 --> 00:01:48,594
nella sezione commenti del componente dettaglio piatto.

22
00:01:48,594 --> 00:01:51,579
Il modulo contiene due campi qui.

23
00:01:51,579 --> 00:01:55,122
Il campo nome e un campo commento.

24
00:01:55,122 --> 00:02:00,570
Nel campo nome, il nome dell'autore per il commento verrà inserito dall'utente.

25
00:02:00,570 --> 00:02:04,406
Quindi nel loro campo di commento che è un'area di testo,

26
00:02:04,406 --> 00:02:10,037
si permetterà all'autore di inserire il commento che vogliono inviare.

27
00:02:10,037 --> 00:02:14,639
Inoltre, al fine di ottenere la valutazione per il piatto,

28
00:02:14,639 --> 00:02:22,010
useremo questo componente materiale angolare chiamato cursore materiale angolare.

29
00:02:22,010 --> 00:02:23,730
Per questo componente slider,

30
00:02:25,040 --> 00:02:30,260
un collegamento alla documentazione è fornito nelle risorse aggiuntive.

31
00:02:30,260 --> 00:02:33,541
Il componente slider è abbastanza semplice da creare.

32
00:02:33,541 --> 00:02:38,788
Per questo componente di scorrimento, verranno visualizzati i segni di graduazione in questo modo.

33
00:02:38,788 --> 00:02:43,033
Quindi puoi vedere che hai gia' uno, due, tre, quattro segni di

34
00:02:43,033 --> 00:02:46,300
graduazione e il quinto e' proprio sotto questo pollice.

35
00:02:46,300 --> 00:02:49,943
Così e anche quando si mostra la vista pollice,

36
00:02:49,943 --> 00:02:54,346
mostrerà il taglio nella valutazione selezionata come il.

37
00:02:59,650 --> 00:03:06,047
Quindi, questo deve essere etichettato nella diapositiva angolare del componente che includi

38
00:03:06,047 --> 00:03:12,252
nel loro carattere e questo ti permetterà di selezionare la valutazione per il piatto.

39
00:03:12,252 --> 00:03:15,820
Quindi, questo è il tuo primo compito in questo incarico.

40
00:03:16,880 --> 00:03:22,530
Il secondo compito consiste nell'aggiungere la convalida del modulo per questo modulo.

41
00:03:22,530 --> 00:03:28,589
Ora questo modulo dovrebbe essere creato utilizzando i caratteri reattivi angolari e

42
00:03:28,589 --> 00:03:34,200
anche utilizzando le modifiche di valore osservabili al fine di osservare

43
00:03:34,200 --> 00:03:39,377
eventuali modifiche a uno di questi elementi di controllo del modulo lei.

44
00:03:39,377 --> 00:03:44,226
E ogni volta che si verifica una modifica, è necessario avviare immediatamente

45
00:03:44,226 --> 00:03:48,831
la convalida del modulo utilizzando le modifiche di valore osservabili proprio come abbiamo fatto

46
00:03:48,831 --> 00:03:52,730
nell'esercizio appena completato nella lezione precedente.

47
00:03:54,650 --> 00:03:59,370
Ora, la convalida che è necessario eseguire è che sia il nome che

48
00:03:59,370 --> 00:04:02,020
il commento sono campi obbligatori.

49
00:04:02,020 --> 00:04:06,029
Inoltre, il nome deve contenere almeno due caratteri.

50
00:04:06,029 --> 00:04:11,671
Quindi, se digito solo un carattere, allora dovresti mostrare un messaggio qui che dice,

51
00:04:11,671 --> 00:04:15,283
Nome autore deve essere lungo almeno due caratteri.

52
00:04:15,283 --> 00:04:19,250
Ora, se naturalmente, digitiamo di più, allora sparirà.

53
00:04:19,250 --> 00:04:23,494
Se si rimuove completamente il nome dal campo,

54
00:04:23,494 --> 00:04:28,760
viene visualizzato un messaggio che dice, Nome autore è obbligatorio.

55
00:04:28,760 --> 00:04:31,985
Quindi, il messaggio richiesto dovrebbe essere visualizzato qui.

56
00:04:31,985 --> 00:04:35,327
Quindi, non appena digito almeno due caratteri,

57
00:04:35,327 --> 00:04:38,610
il messaggio scomparirà.

58
00:04:38,610 --> 00:04:42,051
Ora anche per il campo commento, questo è un campo obbligatorio.

59
00:04:42,051 --> 00:04:46,029
Quindi, è necessario digitare almeno alcuni caratteri.

60
00:04:46,029 --> 00:04:49,159
Non vi è alcuna restrizione sul numero di caratteri.

61
00:04:49,159 --> 00:04:54,586
Ma se non vengono digitati caratteri quando si visualizza il messaggio qui dicendo,

62
00:04:54,586 --> 00:04:56,980
commentare come richiesto.

63
00:04:56,980 --> 00:05:02,966
Se il modulo non è attualmente valido, il pulsante di invio non funzionerà.

64
00:05:02,966 --> 00:05:08,006
Ma una volta che il modulo diventa valido, il pulsante di invio funzionerà e

65
00:05:08,006 --> 00:05:10,707
dovrebbe consentire di inviare il carattere.

66
00:05:10,707 --> 00:05:15,160
Quindi, questo è il secondo compito del tuo incarico.

67
00:05:16,170 --> 00:05:23,060
Il compito difficile nel tuo compito è che non appena il modulo contiene informazioni valide,

68
00:05:23,060 --> 00:05:28,240
dovresti visualizzare un'anteprima di ciò che hai appena inviato nel modulo.

69
00:05:28,240 --> 00:05:33,310
Lasciami digitare qualcosa di più significativo qui, in modo che siano

70
00:05:33,310 --> 00:05:38,460
anteprima sembra interessante.

71
00:05:38,460 --> 00:05:43,550
Quindi vedi che non appena digiti informazioni valide nel tuo modulo,

72
00:05:43,550 --> 00:05:48,440
dovresti mostrare un'anteprima di

73
00:05:48,440 --> 00:05:53,210
come apparirà il commento se viene aggiunto in quell'elenco di commenti per il piatto.

74
00:05:53,210 --> 00:05:57,712
Ora nota che nell'anteprima non hai ancora visualizzata la data.

75
00:05:57,712 --> 00:06:01,046
Quindi, questa è un'altra cosa che devi tenere a mente.

76
00:06:01,046 --> 00:06:08,027
Se il modulo diventa non valido, l'anteprima scompare.

77
00:06:08,027 --> 00:06:13,020
Ma non appena il modulo diventa valido, l'anteprima riapparirà.

78
00:06:13,020 --> 00:06:18,850
Quindi, questo è qualcosa che dovresti progettare in modo appropriato utilizzando l'elenco ND e

79
00:06:18,850 --> 00:06:26,190
quindi assicurarti che il modulo sia valido prima di visualizzare queste informazioni lì.

80
00:06:26,190 --> 00:06:27,044
Quindi, questa è l'anteprima.

81
00:06:27,044 --> 00:06:30,676
Ora, quando l'utente fa clic sul pulsante Invia,

82
00:06:30,676 --> 00:06:34,370
ci sono alcune cose che devi fare.

83
00:06:34,370 --> 00:06:39,344
Quando l'utente fa clic sul pulsante Invia, questo commento verrà

84
00:06:39,344 --> 00:06:44,589
aggiunto all'elenco dei commenti che hai per questo particolare piatto.

85
00:06:44,589 --> 00:06:50,943
Quindi, lasciami fare clic sul pulsante di invio e noterai immediatamente che il modulo

86
00:06:50,943 --> 00:06:56,490
è stato aggiunto nell'elenco dei commenti per questo particolare piatto.

87
00:06:56,490 --> 00:07:01,349
Quindi, vedi che l'ultimo commento che ho appena inserito è stato aggiunto qui.

88
00:07:01,349 --> 00:07:05,632
Si noti inoltre che la data per

89
00:07:05,632 --> 00:07:13,140
il modulo è stata aggiunta nel commento qui.

90
00:07:13,140 --> 00:07:18,612
Quindi dovresti prendere i valori dal modello del modulo e

91
00:07:18,612 --> 00:07:24,084
quindi copiarlo in un modello di dati, quindi premi il commento

92
00:07:24,084 --> 00:07:30,009
nel raggio dell'oggetto JavaScript dei commenti per l'oggetto piatto.

93
00:07:30,009 --> 00:07:34,553
Quindi, questo è qualcosa che devi fare usando il metodo push dell'array per l'

94
00:07:34,553 --> 00:07:36,960
array di oggetti JavaScript.

95
00:07:36,960 --> 00:07:41,534
Inoltre, la data dovrebbe essere automaticamente configurata e

96
00:07:41,534 --> 00:07:43,574
aggiunta a tale modello di dati.

97
00:07:43,574 --> 00:07:48,510
Ricordare che il modello di modulo non contiene la data, ma

98
00:07:48,510 --> 00:07:54,800
il modello di dati che è derivato dalla classe di commento che abbiamo progettato,

99
00:07:54,800 --> 00:08:01,500
il modello di dati contiene l'autore, la valutazione, il commento e la data.

100
00:08:01,500 --> 00:08:05,642
Quindi, è necessario aggiungere la data nel modello di dati.

101
00:08:05,642 --> 00:08:11,261
Quindi, questo è dove si farà uso della

102
00:08:11,261 --> 00:08:16,370
classe data Java Script insieme alla conversione in una

103
00:08:16,370 --> 00:08:24,060
stringa ISO prima di memorizzare nel campo data del modello di dati del commento.

104
00:08:24,060 --> 00:08:29,164
Ora vi ho fornito collegamenti ad esempi di come è possibile

105
00:08:29,164 --> 00:08:34,268
creare la data e come si può convertire la data in una

106
00:08:34,268 --> 00:08:39,148
stringa ISO nella documentazione per questa assegnazione,

107
00:08:39,148 --> 00:08:44,158
e anche nelle risorse aggiuntive per questo elemento.

108
00:08:44,158 --> 00:08:48,904
Quindi, per favore cerca per capire come dovresti

109
00:08:48,904 --> 00:08:52,530
aggiungere la data a quel campo di commento lì.

110
00:08:52,530 --> 00:08:56,989
E una volta che il commento viene inserito nella serie di commenti,

111
00:08:56,989 --> 00:09:02,176
allora si unirà al resto dei commenti per quel particolare piatto.

112
00:09:02,176 --> 00:09:06,600
Devi ricordare che non stiamo salvando questo sul lato server,

113
00:09:06,600 --> 00:09:09,129
perché non abbiamo un lato server.

114
00:09:09,129 --> 00:09:13,330
Quindi, se ricarichi la tua pagina, quel commento scomparirà.

115
00:09:13,330 --> 00:09:15,040
Questo è perfettamente accettabile.

116
00:09:15,040 --> 00:09:19,417
In questa fase, non stiamo cercando di salvare le modifiche

117
00:09:19,417 --> 00:09:23,810
al piatto sul server attraverso il nostro servizio di piatti.

118
00:09:23,810 --> 00:09:27,542
Che faremo in uno dei cicli successivi.

119
00:09:27,542 --> 00:09:31,811
Quindi in questo momento, se ricarichi questa pagina, il commento che hai appena inserito

120
00:09:31,811 --> 00:09:35,240
scomparirà, ma questo è perfettamente accettabile.

121
00:09:35,240 --> 00:09:38,670
Quindi, questo è il terzo compito del tuo incarico.

122
00:09:39,720 --> 00:09:45,197
Dopo aver completato tutte e tre le attività, assicurarsi che tutto funzioni

123
00:09:45,197 --> 00:09:50,602
correttamente prima di inviare la soluzione di assegnazione al sistema.

124
00:09:50,602 --> 00:09:54,269
[ MUSIC]