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

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

קשירה דו-כיוונית ב-Angular

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

קשירה דו-כיוונית מאפשרת לנו לעדכן את המידע המוצג למשתמש בקובץ התבנית וגם את ערכה של התכונה בקומפוננטה בו-זמנית.

אחרי שבמדריך קודם למדנו קשירה חד-כיוונית ב-Angular , שמאפשרת להעביר מידע מהקוד במחלקה לתבנית ההטמ"ל או הפוך, אבל לא ביחד, במדריך זה נלמד להעביר מידע בשני הכיוונים באמצעות קשירה דו-כיוונית, two-way data binding

קשירה דו כיוונית Angular

 

קשירה דו-כיוונית באמצעות FormsModule

כדי ליישם קשירה דו-כיוונית אנחנו צריכים לייבא את FormsModule בקובץ app.module.ts

/src/app/app.module.ts
---------------------------------

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

זה לא מספיק לייבא את המודול, צריך גם להוסיף אותו למערך ה-imports.

 

משתנה שקשור בקשירה דו-כיוונית

את המשתנה name נגדיר כמשתנה דו-כיווני.

בתבנית ההטמ"ל, נגדיר את המשתנה כ-ngModel

[(ngModel)]="name"

ובכך נגדיר את המשתנה כקשור בקשירה דו-כיוונית.

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

<label>הזן את שמך</label><br />
<input [(ngModel)] = "name" /><br />
<p>{{name}} שלום</p>

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  name = "ג'וני";
}

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

 

למדריכים נוספים בסדרת האנגולר

 

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

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

 

 

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

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

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

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

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

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

 

 

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

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

 

תמונת המגיב

לא ג'וני בתאריך: 18.11.2017

ממש מצוין. זה המדריך הראשון שראיתי בעברית, והוא מוסבר היטב.

תמונת המגיב

נאור בתאריך: 12.08.2019

תודה רבה

תמונת המגיב

ליאור בתאריך: 24.10.2019

סוף סוף הבנתי. תודה.

תמונת המגיב

B.B בתאריך: 10.02.2020

תודה רבה! זה סידר לי את הדברים..

תמונת המגיב

אוריאל בתאריך: 11.05.2020

מדריך ברור וקולע , כל הכבוד ותודה רבה

תמונת המגיב

לילי בתאריך: 14.07.2020

איזה מדריך מצוין, אתה ממש עוזר לי להבין את הדברים, תודה רבה !!

תמונת המגיב

יעל בתאריך: 02.11.2020

ואני הרבה זמן שואלת את עצמי מה ההבדל בשימוש ב formsControl ל ngModel??

תמונת המגיב

בנימין בתאריך: 17.01.2021

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

תמונת המגיב

הבי בתאריך: 10.04.2021

מגניב! מדריך פצץ תודה