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

  • چهارشنبه ۱۶ مرداد ۱۳۹۸
  • بازدید ۲۱۰ نفر

angular7 data binding 6610 تصویر

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

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

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

مانند نمونه زیر:

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

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

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

در تصویر زیر می توانید خروجی برنامه را مشاهده کنید:

angular7 data binding 6610 1 تصویر

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

محتوای فایل app.component.ts:

محتوای فایل app.component.html:

خروجی:

angular7 data binding 6610 2 تصویر

افزودن بخش Else

محتوای فایل app.component.ts:

محتوای فایل app.component.html:

در این مثال ما مقدار متغیر isavailable را برابر با false قرار داده ایم. به منظور مشخص کردن یک بخش else برای یک شرط باید از ng-template استفاده کنیم.

این بخش از کد یک template درست می کند:

#condition1 شناسه ای است که با استفاده از آن می توانیم به این template دسترسی داشته باشیم.

خروجی مثال:

angular7 data binding 6610 3 تصویر

استفاده از If Then Else

محتوای فایل app.component.ts:

محتوای فایل app.component.html:

angular7 data binding 6610 4 تصویر

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

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