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

angular 6 data binding 5605 تصویر

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

اتصال داده ها (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 تصویر

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

و

خروجی:

angular 6 data binding 5605 2 تصویر

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

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

خروجی:

angular 6 data binding 5605 3 تصویر

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

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

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

خروجی:

angular 6 data binding 5605 4 تصویر

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

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