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

اتصال داده ها (Data Binding) از همان AngularJS تا سایر نسخه هایی که تا کننون منتشر شده در دسترس بوده است. به منظور اتصال داده ها از {{}} استفاده می شود. این فرآیند درج (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 7';
   // declared array of months.
   months = ["January", "February", "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 بودن این متغیر نمایش می دهیم:

محتوای فایل 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 7';
   // declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];
   isavailable = true; //variable is set to true
}

محتوای فایل 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>
<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

محتوای فایل 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 7';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May","June", "July",
      "August", "September", "October", "November", "December"];
   isavailable = false; //variable is set to true
}

محتوای فایل 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>
<br/>
<div>
   <span *ngIf = "isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

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

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

<ng-template #condition1>Condition is invalid</ng-template>

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

خروجی مثال:

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

محتوای فایل 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 7';
   // declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];
   isavailable = true; //variable is set to true
}

محتوای فایل 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>
<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>