اتصال داده ها (Data Binding) در انگولار 6 – آموزش Angular 6

تصویر angular-6-data-binding_5605 اتصال داده ها (Data Binding) در انگولار 6 - آموزش Angular 6

اتصال داده ها (Data Binding) در انگولار 6

اتصال داده ها (Data Binding) از همان AngularJS تا Angular 6 در دسترس بوده است. به منظور اتصال داده ها از {{}} استفاده می شود. این فرآیند درج (interpolation) نامیده می شود. در بخش قبلی ما متغیر title را با استفاده از این روش در مرورگر نمایش دادیم. در ادامه یک لیست کشویی از ماه ها را با استفاده از Data Binding ایجاد خواهیم کرد.

برای ایجاد این لیست ابتدا یک آرایه از ماه ها را در فایل app.component.ts ایجاد کنید. مانند نمونه زیر:

حال برای این که آرایه تعریف شده در بالا، در مرورگر به صورت یک لیست کشویی نمایش داده شود، کد زیر را در فایل app.component.html قرار دهید:

در کد فوق یک تگ معمولی <select> را با یک تگ <option> ایجاد کردیم. در تگ <option> از حلقه for استفاده شده است. این حلقه به تعداد عناصر آرایه تگ <option> ایجاد می کند و مقدار هر عنصر را به <option> ایجاد شده اتصال می دهد.

توجه! *ngFor دستورالعمل (directive) تکرار (حلقه) در انگولار است.

حال اگر برنامه را اجرا کنید، خروجی زیر را مشاهده خواهید کرد:

تصویر angular-6-data-binding_5605_1 اتصال داده ها (Data Binding) در انگولار 6 - آموزش Angular 6

متغیری که در فایل app.component.ts تعریف شده است را می توان در داخل {{}} استفاده کرد. یکی از دستورالعمل های پر کاربرد دیگر، *ngIf است که برای نمایش مقادیر بر اساس شرط استفاده می شود. برای مثال ما یک متغیر با نام isavailable تعریف کرده و مقدار Condition is valid را با توجه به true یا false بودن این متغیر نمایش می دهیم:

و

خروجی:

تصویر angular-6-data-binding_5605_2 اتصال داده ها (Data Binding) در انگولار 6 - آموزش Angular 6

در ادامه مثال بالا را برای افزودن بخش else تغییر می دهیم:

در کد فوق مقدار متغیر isavaiable به صورت false تنظیم شده است. برای ایجاد بخش else باید یک template ایجاد کنید. مانند نمونه زیر:

خروجی:

تصویر angular-6-data-binding_5605_3 اتصال داده ها (Data Binding) در انگولار 6 - آموزش Angular 6

استفاده از if then else

در کد فوق مقدار متغیر isavailable را برابر با true قرار داده و سپس کدهای html را نیز مانند نمونه یر تغییر دهید:

در کد فوق دو template برای condition1 و condition2 ایجاد کردیم و زمانی که شرط true باشد، مقدار موجود در template اول نمایش داده می شود. در غیر این صورت مقدار template دوم نمایش داده خواهد شد.

خروجی:

تصویر angular-6-data-binding_5605_4 اتصال داده ها (Data Binding) در انگولار 6 - آموزش Angular 6

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است