Angular 4 - Sort Pipe
פרקי ההרצאה: Angular 4 - Sort Pipe
תמלול ההרצאה: Angular 4 - Sort Pipe
הטקסט המלא של הדקות הראשונות בהרצאה «Angular 4 - Sort Pipe» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו רוצים לעשות עוד פילטר משלנו שעושה סורטינג עושה מיון לפי כפתור שהיוזר לחץ לפי שם העמודה זאת אומרת אם הוא לחץ על name זה ממויין לפי שם שימו לב אני לוחץ על name זה מתחיל מ-a לוחץ על name זה עושה לפי z זאת אומרת כל פעם הוא ממיין בצורה אחרת וגם price לפי מחיר זה הכי יקר וזה הכי זול אז שיהיה לי פה ככה שני לחצנים שעושים מיון של רשימה ואני רוצה לעשות את זה
בלי לשנות את הרשימה הקיימת בלי לשחק עם משתנה עזר דרך פייפ לוקח את הרשימה מעביר אותה דרך פילטר שמחפש ומסנן ומעביר דרך פילטר שעושה סורט סורט ביי אוקיי בוא נעשה פרודקט סורטינג פרודקט סורט אוקיי וזה מה שאני רוצה לעשות אני רוצה לעשות פילטר אבל שאלה זה אני צריך גם להעביר לו לפי איזה שדה אני רוצה למיין את זה אז בוא נעשה איזשהו משתנה עזר שנקרא
לו סורט ביי קולום או sorting column לא יודע ונעשה כאן לחצנים שמשנים את הערך של הדבר הזה אז יש לי פה פילטר product sort שמקבל את הפרודקט הזה ומקבל לפי איזה עמודה לעשות sorting וגם הוא צריך לקבל האם זה נלחץ פעמיים או לא בוא נעביר לו עוד פרמטר is דסק, דסק זה אומר סדר יורד או סדר עולה, אז יהיה לנו פה פייפ של
סורטינג שמקבל את הפרודקטס, מקבל שם העמודה לסינון ומקבל האם זה סדר עולה או יורד ואת זה אנחנו עוד מעט נעשה איתכם ביחד, בואו נוסיף כאן ליד הסורטש הזה עוד שני כפתורים, נוסיף פה בטון ונרשום סורט ביי ניים וכשלוחצים על הבטון הזה נפעיל
פונקציה שנקראת קליק סורט ביי ונעביר אליה את שם העמודה שאנחנו רוצים למיין לפיה, פרודקט ניים נראה לי זה נקרא, איך זה נקרא שם העמודה פה, במודל פרודקט ניים, זאת אומרת כשמישהו לוחץ על כפתור שכתוב עליו ניים מופעלת פונקציה sort by product name וכשמישהו לוחץ על כפתור של price זה לפי unit price אתם רואים
זה מודל וזה unit price אז יופי אז עשיתי שני כפתורים שמפעילים את הפונקציה שלי שנקראת sort by בוא נלך עכשיו ונעשה את הפונקציה הזאת הפונקציה הזאת צריכה לקבל את מה שיש כאן ולהכניס אותו לתוך המשתנה sorting column אז בואו נעשה את זה אז הפונקציה sort by column name מה שהיא עושה היא פשוט
מכניסה לכאן את המשתנה הזה ואני לא אוהב את זה שזה ככה search value אז אני אומר ככה this.sorting column מקבל את ה-column name וגם המשתנה desk is desk שהוא בוליין האם זה סדר הפוך?
לחיצה אני משנה לו את המצב זאת אומרת ברגע שלחצת על שם של העמודה אז השם החדש של העמודה נכנס לתוך הסורטינג הזה והדסק מתהפך הסדר יורד מתהפך למקרה שאתה לוחץ על אותה עמודה פעמיים ופה נעשה גם עם אות קטנה שיהיה לנו אותו סטייל כל המקומות אז יופי כשבן אדם לוחץ על כפתור והוא מעביר את השם של הזה אנחנו מעבירים את
זה למשתנה סורטינג קולום ועושים איז דסק וה-ease desk הזה הולך לכאן, וה-sorting column הולך לכאן, וכל זה נכנס ל-filter product sort. בואו נעשה עכשיו את ה-filter הזה בעצמנו.
נלך ל-pipes, נעשה פה קובץ חדש. טייפ סקריפט, NG2, פייפ, דאבל טאב, נקרא לסלקטור הזה אסקייפ, שם שטרודל, שם סלקטור product sort, שזה למעשה השם של הפייפ.
נכון, זה השם של הפייפ. הקלאס שלי יקרא כמו השם של הקובץ, Product Sort Pipe אז זה נקרא כמו השימוש שלו וזה איזה שם שבא לי אני לוקח אותו שם ושם לו מילת Pipe ולפני שאני שוכח אני רץ למודול ועושה לו מהר מאוד אימפורט From Product Sort Pipe אתם רואים פה שצריך להיות עקביים עם שמות פה קראתי לו Filter Product Pipe ופרודקטס
סורט פייפ אני לא אוהב את זה יודעים מה אני אלך לשנות את זה בכל המקומות אני אעשה פה פילטר פרודקטס פילטר פייפ product filter pipe גם פה product filter שיהיה לי הכל אחיד יפה יפה יפה ופה product filter product filter כאן product filter כאן אז product filter כאן product filter כאן בתוך הפייפ השם של הקלאס זה מה שעושים פה במודול יופי אתם
רואים צריך להיות כל הזמן עקביים עם השמות ולא לעשות בלאגן כי אחרי זה לשנות את זה זה גם סיפור אז שם של הקלאס מופיע במודול והדבר הזה זה מופיע כבר בשימוש שלו יופי מה אנחנו חוזרים לסורטינג שלנו?
ובסורטינג שלנו אנחנו רוצים לקבל, מה הפילטר שלי מקבל? הפילטר שלי מקבל את ה-products כפלט, למעשה הוא מקבל את הפלט של הפייפ הזה, אז בואו נראה מה זה הפלט שלו, הפלט שלו זה מערך של product, אתם רואים מערך של product?
זה הפלט שלו, אז את זה הוא מקבל כדבר ראשון, ואנחנו מכניסים לו, הפרמטר השני שהוא מקבל זה sorting column, שם של העמודה למיון, ניתן לה סוג סטרינג, מה הפרמטר השלישי שהוא מקבל?
איזדסק, האם זה סדר עולה או יורד? שימו לב, יש לו שלושה פרמטרים, אז אני שם פה פסיק ואומר לו איזדסק מסוג בוליאן. ומה הוא פולט החוצה?
מערך של פרודקטס. אוקיי, גם כאן צריך לעשות אימפורט, אבל אין לי טעם לרשום עוד פעם אימפורט, כשיש לי את זה כבר כתוב ואני עושה רק קופי פייסט. אז יש לי פה פייפ, שזאת הפונקציה שלו, שמקבל פרודקטס, מקבל את הסורטינג קולום שמקבל דסק ומחזיר מערך של פרודקטס עכשיו בואו נבדוק שאם פרודקטס שהוא קיים וגם סורטינג
קולום קיים וגם פרודקטס נקודה לנקס גדול מאפס וגם סורטינג קולום נקודה לנקס גדול מאפס שיש לנו בכלל על מה לדבר ואם יש לנו על מה לדבר נעשה את המיון הזה אוקיי עכשיו מה אנחנו עושים אנחנו לוקחים את הפרודקטס עושים נקודה סורט יש לו פונקציית סורט מובנית בתוך מערך אתם רואים זה חלק מתוך אריי ומה היא מקבלת? היא מקבלת מוצר A, מוצר B,
ופולטת מספר. המספר הזה או חיובי או שלילי או אפס. אם זה אפס לא נוגעים, לא מחליפים כלום, שלילי. אז מחליפים ביניהם, אם זה חיובי אז לא מחליפים ביניהם. בואו נראה איך זה עובד.
לוקחים product1, product2, זה מה שהפונקציה מקבלת, אתם רואים פה, אני מראה לכם עוד פעם. פונקציה מקבלת שני מוצרים ופולטת מספר, והמספר הזה אומר האם צריך להחליף להם מיקומים או לא.
ככה הוא ממיין לבד, רק הוא לא יודע איך להשוות ביניהם, כי בתוך פרודקט אחד ופרודקט שתיים יש הרבה שדות.
אז אני עושה כזה דבר, אם פרודקט אחד נקודה השדה, אבל אני צריך לתת לו שם של השדה, אני לא יודע לפי איזה שדה אני ממיין, כי אני יכול למיין גם לפי מחיר וגם לפי שם.
בגלל זה יש לי פה סורטינג קולום. הסורטינג קולום הוא יכול להיות פעם פרודקט נם, פעם יוניט פרייס, פעם זה, פעם זה.