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

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

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May",
            "June", "July", "August", "September",
            "October", "November", "December"];
}

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

<!--The content below is only a placeholder and can be replaced. -->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>

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

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

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

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;   //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable">Condition is valid.</span>
  <!--over here based on if condition the text condition is valid is displayed.
  If the value of isavailable is set to false it will not display the text.-->
</div>

خروجی:

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

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

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

خروجی:

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

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

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

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

خروجی: