Angular 4 - Filter and Pipe
פרקי ההרצאה: Angular 4 - Filter and Pipe
תמלול ההרצאה: Angular 4 - Filter and Pipe
הטקסט המלא של הדקות הראשונות בהרצאה «Angular 4 - Filter and Pipe» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו רוצים ללמוד על מיון וחיפוש איך לעשות לדוגמה שיחפש לי צ'אי בלבד או צ'אנג או לא יודע מה יש לו שמה לעשות חיפוש כאן ואיך לעשות מיון לדוגמה מחיר 26 אני אומר לו לא תראה לי את המחיר הכי גבוה ועוד פעם תראה לי את המחיר הכי נמוך 7 דולר איך לעשות לו את המיון לפי מחיר ומיון לפי שם אתם רואים משהו שמתחיל ב-Z משהו שמתחיל
ב-A ואת כל זה אנחנו נלמד איך לעשות גם בצורה הקלאסית וגם עם פייפים, לעשות עם צינורות של פייפ. אז זה מה שאנחנו הולכים ללמוד, ובואו נתחיל מזה שאנחנו נעשה את זה בדרך הקלאסית, בלי שום דבר מתחכם, ואיך עושים את זה?
על ידי משתנה עזר. נעשה פה משתנה עזר, נקרא לו Filtered Products, והוא יהיה אריי של פרודקטס ואנחנו פשוט מאוד נתחיל בזה שאיך שמגיע לנו רשימת מוצרים אנחנו מעדכנים גם את הפילטר פרודקס שווה לפרודקס המקורי ועכשיו עם הפילטר פרודקס הזה אנחנו נכניס אותו לתוך search בוא נעשה לו
תיבת search ונעשה פונקציה שמפלטרת אז אנחנו הולכים לקומפוננטה ל-HTML ומוסיפים פה בהדר במקום product list איפה שהכותרת העליונה ה-header זה זה כן זה ה-header פה אנחנו מוסיפים את הריבוע הזה של טקסט בוקס בואו נוסיף אותו במקום product list נוסיף פה input type text או search אפילו שנייה search name search text box value אין
לו שום value שאנחנו מכניסים לו ונעשה place holder שווה search בשלוש נקודות נכון כשאני מוחק פה הכל זה search בשלוש נקודות ונגיד לו שכשמישהו מכניס פה ערך תחבר אותו למשתנה הזה שעשינו וכשקורא input גם תפעיל לי את הפונקציה של search בוא נעשה גם פונקציה של search search function שמקבלת את המוצר שמחפשים אז זה מה שאני עושה
למעשה אני פה אומר לאנגולר כל מה שמכניסים לך תכניס לי למשתנה filter search ואיך שמשהו נכנס תפעיל לי גם את הפונקציה של search function בוא נעשה עכשיו פונקציה של search function זאת השיטה הקלאסית לעשות את זה עם משתנה עזר ואז להגיד לו פה ברשימה של for איפה שהוא רץ על כל המוצרים פה איפה שהוא רץ על כל המוצרים ברשימת for הזאת לא ערוץ על כל הפרודקטס
אלא על הרשימה של פילטרד פרודקטס שירוץ על הרשימה של פילטרד פרודקטס במילים אחרות אנחנו לוקחים פילטרד פרודקטס משייכים לו את הפרודקטס הרגיל ואומרים ללולאת for לרוץ על הפילטרד פרודקטס כאשר הפרודקטס הרגיל נשאר מקורי וכל פעם שיש לי פה פילטרד פרודקטס אני אעשה דבר כזה אני אצור מערך חדש new search value בוא נקרא לזה search value מסוג סטרינג ונעשה כזה דבר
ש-filtered-products שווה ל-new array של פרודקטס עשינו לו מערך חדש גם כאן צריך ב-default ישר לתת לו איזשהו מערך חדש אז אנחנו יוצרים פה מערך חדש משייכים לו איזשהו ערך שיגיע מהשרת כשמישהו מכניס לי משהו ב-search אני יוצר מערך חדש ומתחיל לדחוף לתוכו ערכים מתוך פרודקטס המקורי this.products.foreach
תעבור לי על כל הערכים שיש לך בפרודקטס תיקח משהו ותבדוק אם הפרודקטס קונטיינס product name נקודה קונטיינס סליחה בואו נעשה את זה ככה האם הפרודקט נקודה product name includes יש פה הרבה פונקציות אפשר לעשות גם index of אפשר לעשות includes גם index of היה מתאים לי למצוא איזשהו סטרינג גם includes מחזיר לי true false
האם הפרודקט name includes ובסוגריים מה הוא כולל search value ואם הוא כולל search value אני יכול לעשות פה מוקצה שאם product כולל את מה שאנחנו מחפשים אז תעשה this.filteredproducts.push ותדחוף את המוצר הנוכחי למסוננים אוקיי זה אם הוא כולל אז אני אומר ככה אם product כולל את ה-search value תדחוף אותו לרשימת המסוננים ואז יהיה לי רק את מה שאנשים
מחפשים שזה מצוין בוא נבדוק שזה עובד רק לפני כן אני רוצה עוד לבדוק שה-this.products הוא לא ריק למה יכול להיות שהוא יופעל עוד לפני שיגיע מידע מהשרת if this.products בכלל קיים הוא לא undefined and this.products.length גדול מ-0 אז הכל בסדר אלס לא צריך את אלס אוקיי אז אני בודק שהוא קיים ומחזיר בחזרה את ה...
אין לי מה להחזיר בחזרה בעצם למעשה עשיתי search וזהו עשיתי search בתוך ה-search דחפתי לתוך ה-filtered product את כל המוצרים החדשים עשיתי מראה חדש דחפתי לתוכו את כל המוצרים ורק אם פרודקט הגיע אנחנו עושים את כל הסיפור הזה, בסדר? אם פרודקט לא קיים לא עושים כלום.
בואו נראה שזה בכלל עובד. אז עשינו פה פונקציה שבעצם עוברת, יוצרת מערך חדש ועוברת על כל הרכיבים בפנים ודוחפת לתוכו את מה שצריך מתוך הפרודקט המקורי, ובסורצ' חיברנו את מה שמחפשים ואת הפונקציה שמפעילה את זה. האמת שיש דרכים יותר טובות לעשות את זה, אבל בסדר, בואו נסתפק בזה, זאת רק דוגמה לשיטה הקלאסית שאני לא רוצה להשתמש בה כי באנגולר יש פייפים הרבה יותר
נוחים וזה מה שאני רוצה להשתמש בפייפ. ככה אני מראה לכם את הלוגיקה הרגילה. בואו נראה מה קרה לנו פה, אוקיי, קודם כל אני רואה שיש לי פה בעיה עם הביידינג הזה. מה הבעיה?
פילטרד פרודקטס? אה, אני לא נכון, אני לא צריך פילטרד פרודקטס. אני צריך פה לשייך search value. אני צריך search value string.
אני משייך search value והsearch function מוציאה לי את ה-filtered. בואו נראה, אה, זה כבר הרבה יותר טוב, בואו נעשה צ'אי, יפה, ואם אני כותב אותיות קטנות, הוא מתעלם, אתם רואים, הוא מתעלם מאותיות קטנות, שזה לא משהו שהייתי רוצה, אז אני אעשה פה product name.to-lower, וגם ב-search value אני אעשה to-lower, ועכשיו זה, קודם כל אקח את הפרודקט, אעשה
לו לואוור קייס, ואחרי זה אבדוק האם הוא כלול בפנים או לא, בואו נראה, צ'אי, הנה, עכשיו זה עובד, יפה מאוד, חברים, אז עשינו סרצ' אבל עשינו אותו לא אוניברסלי, עשינו אותו בתוך קטגוריה ספציפית.
יכלנו לעשות אותו הרבה יותר קריא, הרבה יותר טוב על ידי מנגנון שנקרא Pipe. Pipe זה למעשה כמו פונקציה רגילה, רק היא אוניברסלית ואפשר להפעיל אותה בכל מיני מקומות ויותר קריאה מבחינת הבהירות שלה. מה זה אומר? תראו, במקום לעשות שזה search, הוא משפיע על ה-filtered, ולך תבין את כל הלוגיקה הזאת, אפשר לעשות את זה הרבה הרבה הרבה
יותר נוח. שימו לב איך אני יכלתי לעשות את זה כדי שזה יהיה הרבה יותר קריא, שזה הרעיון שלהם, הם אומרים תקשיב, אתה רוצה לסנן, אתה רוצה למיין, אתה רוצה לעשות כל מיני פעולות כמו להציג תאריך בצורה מסוימת, לא צריך משתנה עזר לזה, תעשה פרודקטס מקורי, תעביר אותו דרך פייפ לפני שאתה מוציא אותו החוצה,
ונעשה לדוגמה פרודקט פילטר. זאת אומרת, אני אומר לו, תקשיב, לפני שאתה מעביר את הפרודקטס, תעביר אותו דרך סינון כזה, דרך צינור כזה, שהצינור שלי נקרא פרודקט פילטר, ותן לו גם פרמטרים.
הרעיון של פייפ אומר דבר כזה, עזוב אותך לשנות את הפרודקטס המקורי, לעשות לו משתנה עזר, לשנות אותו באיזושהי פונקציה, יש דרך הרבה יותר קריאה והרבה יותר פשוטה לעשות את זה, להעביר לדוגמה משתנה לפני שהוא יוצא החוצה דרך איזשהו צינור, ובצינור הזה זה למעשה פונקציה שתופעל עליו ותשנה אותו.
בואו נראה לזה כמה דוגמאות באתר של אנגולר עצמם, נלך לאתר של אנגולר. ארבע פייפ, אנגולר, ארבע פייפ, הנה, האתר של אנגולר ולמעשה יש לנו פה הסברים מה זה הפייפים האלו, אתם יכולים לראות איפה זה נמצא ויש פה דוגמה, לדוגמה אני לוקח את התאריך יום הולדת ומעביר אותו דרך צינור שנקרא דייט ואז הוא יוצא לי תאריך יפה ולא משהו מכוער
למעשה, אני יכול גם לתת לו פרמטרים, אתם רואים אחרי הפילטר של דייט אני יכול לעשות לו פרמטר ולהעביר לו איזשהו פרמטר, זה מה שאנחנו הולכים לעשות לבד, עוד מעט יש פייפים מוכנים ויש פייפים שאנחנו נעשה איתכם לבד ולדוגמה, לוקחים תאריך,
מעבירים אותו דרך פייפ שמשנה אותו לתאריך יפה מעבירים אותו דרך פייפ עוד פעם שמשנה אותו לאותיות גדולות ואז יוצא לנו כזה דבר יפה כמובן שבדייט אנחנו גם יכולים לתת לו פרמטרים אקסטרה איך אנחנו רוצים שהתאריך הזה ייראה לדוגמה, נקודתיים ועוד כמה פרמטרים לפייפ הפייפ הזה זה למעשה פונקציה שאנחנו יכולים
לבנות אותה לבד אפשר לעשות custom pipes ולבנות אותם לבד ומאחורי הקלעים זאת פונקציה רגילה שמקבלת משהו ומחזירה משהו וזה מה שאנחנו הולכים לעשות אני רק רוצה להראות לכם איזשהו pipe מוכן יש פה עוד משהו שנקרא pure, pure זה אומר שהpipe הזה עוקב אחרי השינויים אבל לא בתוך האובייקט אלא רק על הרפרנס לאובייקט על זה נדבר בהמשך
ובואו נמצא פה pipe ואנחנו רואים פה שיש פה כמה פייפים מוכנים uppercase, בעצם ה-currency, מטבע, אז תאריך, יש פה כמה פייפים מוכנים, אבל בואו נעשה אחד משלנו, שבואו נשתמש ב-currency קודם כל. בואו נשתמש ב-currency, ואחרי שנשתמש
ב-currency, אתם רואים איך משתמשים בו? מפעילים את ה-currency, אחרי זה נותנים לו פרמטר כלשהו, שזה למעשה המטבע, באיזה מטבע להשתמש בו, האם להציג את הסימן של דולר או לכתוב מילת דולר, false ו-true, והפרמטר הבא כמה סימנים לפני הנקודה וכמה סימנים אחרי הנקודה.
בואו נראה איך זה עובד הפייפ הזה ועוד דקה נבנה פייפ משלנו. באנגולר אחד היה פייפ מוכן לפילטרים, בפייפ באנגולר החדש הם כבר לא עשו פייפ לפילטרים ואנחנו צריכים לכתוב אותו לבד.
אז אני אומר, תקשיב, לפני שאתה מוצא את המחיר באתר, איך זה עכשיו? עכשיו, לפני שאתה מוצא תעשה אותו עם פרמטר usd וזה שם של פונקציה, תעביר אותו דרך פונקציה שנקראת currency, תראה את הסימן של דולר תעשה ארבע לפני הנקודה ואחרי הנקודה בין שתיים לשתיים זה אומר תמיד שני סימנים אחרי נקודה
בוא נראה איך זה ייראה ואחרי שאנחנו נראה איך זה ייראה אנחנו לבד נבנה פייפ שבמקום הדבר הזה יהיה לנו פייפ שיושב על פרודקטס הנה אנחנו רואים כאן שבאמת נהיה סימן של דולר ופה יש ארבע תווים לפני הנקודה ושניים אחרי הנקודה אוקיי עכשיו אם אני לוקח ומחליף את זה לדוגמה לפולס את הפרמטר הזה לפולס אתם תראו שבמקום סימן
של דולר כתוב מטבע usd. אם אני מחזיר את זה לפולסה ושם פה 0 או רק נקודה, אז הוא יעשה 18, 19 או כמה שיש לו.