קשירה דו-כיוונית ב-Angular
קשירה דו-כיוונית מאפשרת לנו לעדכן את המידע המוצג למשתמש בקובץ התבנית וגם את ערכה של התכונה בקומפוננטה בו-זמנית.
אחרי שבמדריך קודם למדנו קשירה חד-כיוונית ב-Angular , שמאפשרת להעביר מידע מהקוד במחלקה לתבנית ההטמ"ל או הפוך, אבל לא ביחד, במדריך זה נלמד להעביר מידע בשני הכיוונים באמצעות קשירה דו-כיוונית, two-way data binding
קשירה דו-כיוונית באמצעות 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
מגניב! מדריך פצץ תודה