תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

local reference באפליקציה אנגולרית

מחבר:
בתאריך:

משתנים מקומיים מספקים גישה ישירה לאלמנט בתוך ה-html. כדי להכריז על local reference מקדימים למזהה סולמית (#):

<input #myLocalReference value="">

בדוגמה זו, myLocalReference הוא ה-reference שאנחנו שמים על השדה בטופס.

המשתנה המקומי מתייחס לשדה שבתוכו הוא יושב, ומשתמשים בו כדי להעביר מידע:

  1. לעדכון תבנית ה-html שבתוכה הוא יושב
  2. לעדכון הקוד בקומפוננטה

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

/src/app/app.component.ts
-----------------------------------

<input #myLocalReference value="" (keyup)="changeVal()">
<p>{{ myLocalReference.value }}</p>

/src/app/app.component.html
-----------------------------------

changeVal(){}

שימו לב, האירוע של keyup יגרום לעדכון הערך של ה-local reference ב-html באופן אוטומטי בלי שהמתודה מבצעת פעולה.

ניתן להשיג את אותה התוצאה באמצעות קריאה למתודה שתעדכן את הערך המוצג ב-html:

/src/app/app.component.ts
-----------------------------------

<input #myLocalReference value="" (keyup)="changeVal(myLocalReference.value)">
<p>{{ value }}</p>

/src/app/app.component.html
-----------------------------------

value = "";
changeVal(val: string){
  value = val
}

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

ניתן להאזין ליותר מאירוע אחד באמצעות אותו local reference:

<input #myLocalReference value=""
  (keyup)="changeVal(myLocalReference.value)"
  (blur)="changeVal(myLocalReference.value)"
>

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

ניתן לגרום ליותר מפעולה אחת להגיב לאותו האירוע

<input #myLocalReference value=""
  (keyup)="changeVal(myLocalReference.value)"
  (blur)="changeVal(myLocalReference.value); myLocalReference.value=''"
>

  • בדוגמה זו, האירוע blur עושה שני דברים. קורא לפונקציה changeVal , וגם מנקה את הערך של השדה.
  • בין שתי הפעולות מפריד הסימן נקודה פסיק.

למדריכים נוספים בסדרת ה-Angular

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך אומרים בעברית אינטרנט?

 

תמונת המגיב

הדס בתאריך: 24.10.2018

מדריך מעולה!!

תמונת המגיב

יוסי בן הרוש בתאריך: 24.10.2018

בשמחה.

תמונת המגיב

חנה בתאריך: 27.12.2018

פשוט בהיר!

תמונת המגיב

דבי בתאריך: 23.01.2019

אין מילים! תודה רבה!

תמונת המגיב

אבי בתאריך: 18.02.2021

נראה לי יש קצת בילבול בכותרת איזה דף מוצג מעל כל קוד

תמונת המגיב

רחל בתאריך: 25.05.2022

האם השורה לעיל תקינה: (blur)="changeVal(myLocalReference.value); myLocalReference.value=''" איך יתכן שאין סוגר לגרשיים?