Angular 4 - การผูกข้อมูล

การผูกข้อมูลสามารถใช้ได้จาก AngularJS, Angular 2 และตอนนี้มีให้ใน Angular 4 แล้วเช่นกัน เราใช้วงเล็บปีกกาในการผูกข้อมูล - {{}}; กระบวนการนี้เรียกว่าการแก้ไข เราได้เห็นแล้วในตัวอย่างก่อนหน้านี้ของเราว่าเราประกาศค่าให้กับชื่อตัวแปรได้อย่างไรและจะพิมพ์สิ่งเดียวกันในเบราว์เซอร์

ตัวแปรใน app.component.html ไฟล์เรียกว่า {{title}} และค่าของชื่อจะเริ่มต้นในไฟล์ app.component.ts ไฟล์และใน app.component.htmlค่าจะปรากฏขึ้น

ตอนนี้ให้เราสร้างรายการแบบเลื่อนลงของเดือนในเบราว์เซอร์ ในการทำเช่นนั้นเราได้สร้างอาร์เรย์ของเดือนใน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 4 Project!';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", 
            "June", "July", "August", "September",
            "October", "November", "December"];
}

อาร์เรย์ของเดือนที่แสดงด้านบนจะแสดงในเมนูแบบเลื่อนลงในเบราว์เซอร์ สำหรับสิ่งนี้เราจะใช้โค้ดบรรทัดต่อไปนี้ -

<!--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>

เราได้สร้างแท็กเลือกปกติพร้อมตัวเลือก ในตัวเลือกเราได้ใช้ไฟล์for loop. for loop ใช้เพื่อวนซ้ำอาร์เรย์ของเดือนซึ่งจะสร้างแท็กตัวเลือกที่มีค่าปัจจุบันในเดือน

ไวยากรณ์ for ใน Angular คือ *ngFor = “let I of months” และเพื่อรับค่าของเดือนเราจะแสดงใน {{i}}

วงเล็บปีกกาสองตัวช่วยในการผูกข้อมูล คุณประกาศตัวแปรในไฟล์app.component.ts ไฟล์และไฟล์เดียวกันจะถูกแทนที่โดยใช้วงเล็บปีกกา

ให้เราดูผลลัพธ์ของอาร์เรย์ของเดือนข้างต้นในเบราว์เซอร์

ตัวแปรที่ตั้งค่าใน app.component.ts สามารถผูกกับ app.component.htmlใช้วงเล็บปีกกา ตัวอย่างเช่น,{{}}.

ตอนนี้ให้เราแสดงข้อมูลในเบราว์เซอร์ตามเงื่อนไข ที่นี่เราได้เพิ่มตัวแปรและกำหนดค่าให้เป็นจริง การใช้คำสั่ง if เราสามารถซ่อน / แสดงเนื้อหาที่จะแสดงได้

ตัวอย่าง

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>

เอาต์พุต

ให้เราลองใช้ตัวอย่างข้างต้นโดยใช้ 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 = false;
}

ในกรณีนี้เราได้สร้างไฟล์ isavailableตัวแปรเป็นเท็จ ในการพิมพ์ไฟล์else เงื่อนไขเราจะต้องสร้างไฟล์ ng-template ดังต่อไปนี้ -

<ng-template #condition1>Condition is invalid</ng-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 ใช้กับเงื่อนไขอื่นและตัวแปรที่ใช้คือ condition1. เช่นเดียวกับที่กำหนดให้เป็นไฟล์id ไปที่ ng-templateและเมื่อตัวแปรที่พร้อมใช้งานถูกตั้งค่าเป็นเท็จข้อความ Condition is invalid จะปรากฏขึ้น

ภาพหน้าจอต่อไปนี้แสดงการแสดงผลในเบราว์เซอร์

ให้เราใช้ไฟล์ 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ตามความเป็นจริง ใน 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>

ถ้าตัวแปรเป็นจริงดังนั้น condition1อื่น ๆ condition2. ตอนนี้เทมเพลตสองแบบถูกสร้างขึ้นด้วย id#condition1 และ #condition2.

การแสดงผลในเบราว์เซอร์มีดังนี้ -