Angular 4 - Array Remove Item

תמלול ההרצאה: Angular 4 - Array Remove Item

הטקסט המלא של הדקות הראשונות בהרצאה «Angular 4 - Array Remove Item» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   שלום לכולם, ברוכים הבאים להרצאה על מחיקת מוצר מהסל קניות אני רוצה שיהיו לי שתי אפשרויות למחוק את המוצר אפשרות ראשונה שיהיה לי פה איזשהו X שמוחק לי אותו מהסל והאפשרות השנייה, אם אני אכניס לו פה כמות 0, אז גם שיימחק מהסל אוקיי, וזה מה שאני רוצה לעשות והשאלה איך לעשות את זה

2. 00:22

   אז בואו נראה, סל הקניות שלי נמצא בתוך סרוויס, קארט סרוויס ופה נמצא My Shopping List, רשימת הקניות שלי ואני רוצה שיהיה אפשר למחוק מתוך הרשימה, ואני רוצה שזה יהיה בתוך ה-Cart Service ולא בתוך קומפוננטה מסוימת.

3. 00:39

   כי אני רוצה למחוק את זה גם מתוך קומפוננטה שנקראת סל הקניות, מתוך Cart Component, וגם מתוך Product List. אני רוצה גם מכאן למחוק וגם משם למחוק.

4. 00:49

   כשהכמות היא מגיעה ל-0, אז בוא נעשה קודם כל כמות מינימלית שתהיה 0. אז בגלל שאני רוצה את זה משני הקומפוננטות, ולך תדע אולי אני ארצה משלוש קומפוננטות בעתיד, אני רוצה שזה יהיה ברמת סרוויס שמטפל בכל המוצרים וגם יטפל במחיקה שלו עכשיו בסרוויס הזה אנשים פונים אליו מקבלים את רשימת הקניות ומוסיפים אליה איבר או

5. 01:10

   מוחקים ממנה איבר בואו נראה איך זה נראה בפרודקט ליסק כשאתם לוחצים ביי אתם רואים אתם לוחצים כפתור של ביי לקנות אתם הולכים ישירות לסרוויס ולוקחים את הרשימה ועושים אליה פוש אז יפה כשאתם עושים פוש לרשימה זה כשקניתם את המוצר אז הלקוח עובד ישירות עם

6. 01:28

   הרשימה הזאת בגלל זה אני רוצה משהו לעשות כאן כדי לתפוס את השינוי כשמשהו פה ברשימה משתנה אני רוצה לתפוס את השינוי ברמת הסרוויס שמשהו השתנה עכשיו אם היינו בתוך קומפוננטה היה לי קל כי באנגולר לייף סייקל הוקס לייף סייקל זה במשך החיים הוקס אז אם אנחנו נראה הוקים שאני יכול להתאפס עליהם בתוך מעגל החיים של

7. 01:52

   איזשהו רכיב אז לא הייתה לי בעיה ואני רואה פה שכן אפשר לעשות את זה בוא נלך לאתר של אנגולר הנה אנחנו רואים פה שיש פה Lifecycle Hooks ואני רואה פה שלדוגמא NG-on-init איך שהרכיב עולה NG-on-change איך שמשהו משתנה ברכיב איך שהוא מושמד אני יכול להיכנס לכל מיני מקומות באורך חייו של רכיב הכי מעניין זה NG-on-changes

8. 02:15

   ו-NG-on-init NG-on-init הוא חד פעמי בואו נראה את זה NG-on-init הוא חד פעמי בזמן ההתחול של קומפוננטה או דירקטיבה דירקטיבה זה מאפיין ליד תגית שאני יכול לעשות ידנית לדוגמא דוגמא אתה עושה אימג' של html ואז יש לך את התגיד שלי ואני אומר לו מה יהיה בתגיד שלי אז זה משהו חד פעמים בזמן ההתחול של הרכיב

9. 02:36

   n-g-on-changes זה מעניין כל פעם שמשתנה הוא מגיב כל פעם שמשתנה כניסה באינפוט פרופרטי זוכרים שטרודל אינפוט זה שנותנים לי מבחוץ כשלהעביר לי פרמטר כאילו אני קומפוננט הבת של רכיב גדול והרכיב הגדול מעביר הראשי מעביר אליי מידע דרך המאפיינים וזה נקרא input parameter אני אזכיר לכם מי ששכח בהתחלה לפני שהיה

10. 03:01

    לנו סרוויס אז העברנו מידע לסל הקניות מתוך רשימה על ידי אינפוט למעשה שטרודל אינפוט זה לקבל מרכיב מעליך מידע ואז היינו כותבים קארט קומפוננט ואז קארט שווה משהו זה נקרא האינפוט שלו בואו אני אזכיר לכם פה בפרודקט ליסט נכון שיש לנו קארט קומפוננט בואו

11. 03:22

    נעשה קונטרול c קונטרול v את זה אני אמחק זה רק שאתם תזכרו כן זה רק שתזכרו איך זה היה זה היה ככה אני נותן לרכיב כלשהו נניח לרכיב שלי משהו שכתוב כאינפוט אני נותן לו וכותב שזה שווה אצלי ללא יודע מה איזשהו משתנה לשופינג ליסט אז הדבר הזה בתוך הרכיב נקרא אינפוט אז כשהאינפוט הזה היה משתנה ה-engine changes היה מגיב עכשיו במקום להעביר מידע ככה

12. 03:47

    העברנו את זה דרך סרוויס למה העברנו את זה דרך סרוויס כדי שלא נהיה תלויים ברכיב מעלינו למקרה שאנחנו עוברים דרך ראוטינג אם אם אנחנו לא עוברים דרך הרכיב הזה אלא דרך ראוטינג אז הדבר הזה לא היה עובד אני מזכיר לכם מה שקרה שאחרי שהייתי מוסיף לסל הקניות שלי מוצרים הרכיב הזה היה מעביר לו את המידע והכל היה עובד אבל אז היינו עושים מייקארד

13. 04:10

    בראוטינג ולא היינו מקבלים כלום כי עכשיו כבר אין רכיב ראשי שמעביר מידע אז עשינו ראוטינג ואז בראוטינג קיבלנו את המידע על ידי סרוויס חיצוני אוקיי סרוויס חיצוני מעביר לנו את המידע שאז למדנו איך לעשות סרוויס ועשינו עשינו אתכם cart service ועושים לו injection במקום הדבר הזה עשינו לו injection אני מזכיר לכם injection זה כאן בקונסטרקטור עשינו

14. 04:35

    injection יפה מאוד אז איפה היינו הנה כאן עשינו injection במקום הדבר הזה להעביר ככה עשינו injection כאן וגם injection בפרודקט ליסט כמו שהראיתי לכם ואז היינו מעבירים מידע לשניהם טוב מה זה קשור עכשיו לזה שאנג'יון changes מגיב ומפעיל את הפונקציה NG on changes כמו NG on init רק NG on init חד פעמי hold once אחרי first NG on

15. 05:00

    changes זאת אומרת קודם כל מופעל NG on changes אחרי זה NG on init אבל NG on init מופעל כל פעם מחדש שהאינפוט משתנה יפה מאוד וזה בדיוק מה שאני צריך כשאינפוט משתנה לשנות את זה עכשיו שימו לב יש לי עוד כמה כן אבל זה לא רלוונטי עכשיו הבעיה שהדבר הזה עובד רק על קומפוננטות חברים רק על הקומפוננטות אז אם זה היה עובד לא רק על קומפוננטות יכלתי

16. 05:21

    לעשות משהו מאוד נוח ולעשות פונקציה כזאת אנחנו יכולים לראות פה דוגמא הלאה יש פה דוגמא הנה יש פה דוגמא שאני עושה פונקציה engine on changes ועושה לה כל מיני דברים אם אני ארצה לעשות פונקציה engine on changes בקומפוננט הזה יעבוד בתנאי שיש לה input אבל זה לא עובד על סרוויסים פה על סרוויס זה לא יעבוד הדבר

17. 05:22

    הזה לא יצליח לי פשוט לא יפעיל אותה אז אתם יכולים לראות שconsole.log לא מפעיל לי כלום אם תראו שעכשיו זה לא יפעיל לי כלום והרעיון הוא טוב אם זה היה קומפוננט עם input הנה אני מוסיף פה מידע מוסיף ואין כאן כלום בגלל זה אנחנו צריכים לעשות משהו אחר אנחנו צריכים להגיב לכל פעם שמכניסים לכאן משהו אבל הם מכניסים בלי לעבור דרך פונקציה

18. 06:08

    שלי אז מה הטריק הטריק הוא לעשות במקום המשתנה גטר זאת אומרת אני עושה גטר ואת המשתנה הזה אני מרבי איך אני עושה לו אני עושה לו כף תחתון ואיך עושים גטר זוכרים עשינו את זה גם בקארט זוכרים שעשינו סטר אז עשינו סטר עכשיו אנחנו נעשה גטר כותבים גט או סט ושם של פונקציה

19. 06:29

    ומה שהיא עושה עשינו סטר עכשיו אנחנו עושים גטר גט שם של פונקציה והיא תחזיר בסוף למי שקרא לה את ה-this shopping list זאת אומרת כאילו היא מחזירה אותה רשימה אבל לפני שהיא מחזירה אני רוצה פה להפעיל קוד משלי שמוחק את כל המוצרים שהם כמות 0 אז בואו נעשה פה פונקציה חיצונית שנקראת Remove Items, נמחק מוצר ואז אנחנו ניקח ונפעיל את הפונקציה

20. 06:56

    מכאן, יפה מאוד. עכשיו השאלה זה איך למחוק את המוצר. אז אנחנו צריכים למצוא קודם כל את האינדקס שלו למחיקה, בואו נעשה פה משתנה זמני שנקרא Index to Remove שהוא שווה מינוס 1, זה אומר שעוד לא מצאתי כלום, ואני עושה לולאת for שרצה על כל הרשימה נקודה length ומחפשת בכל