Angular 6 - Veri Bağlama

Veri Bağlama, doğrudan AngularJS, Angular 2,4'ten edinilebilir ve artık Angular 6'da da mevcuttur. Veri bağlama için küme parantezi kullanıyoruz - {{}}; bu sürece enterpolasyon denir. Önceki örneklerimizde başlık değişkenine değeri nasıl beyan ettiğimizi ve aynısının tarayıcıda yazdırıldığını zaten görmüştük.

Değişken app.component.html dosya {{title}} olarak adlandırılır ve başlık değeri app.component.ts dosya ve içinde app.component.htmldeğer görüntülenir.

Şimdi tarayıcıda bir ay açılır listesi oluşturalım. Bunu yapmak için, bir dizi ay oluşturdukapp.component.ts aşağıdaki gibi -

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"];
}

Yukarıda gösterilen ay dizisi, tarayıcıda bir açılır menüde görüntülenecektir. Bunun için aşağıdaki kod satırını kullanacağız -

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

Normal seçme etiketini seçeneğiyle oluşturduk. Seçenek olarak, kullandıkfor loop. for loop aylar dizisi üzerinde yineleme yapmak için kullanılır, bu da aylarda mevcut olan değerle seçenek etiketini oluşturur.

Sözdizimi for Angular'da *ngFor = "let I of months" ve ayların değerini elde etmek için {{i}} olarak gösteriyoruz.

İki küme parantez veri bağlamada yardımcı olur. Değişkenleri sizinapp.component.ts dosya ve aynısı küme parantezleri kullanılarak değiştirilecektir.

Yukarıdaki ayın dizisinin çıktısını tarayıcıda görelim

İçinde ayarlanan değişken app.component.ts ile bağlanabilir app.component.htmlküme parantezlerini kullanarak; Örneğin,{{}}.

Şimdi tarayıcıdaki verileri duruma göre görüntüleyelim. Burada bir değişken ekledik ve değeri true olarak atadık. İf ifadesini kullanarak görüntülenecek içeriği gizleyebilir / gösterebiliriz.

Misal

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>

Çıktı

Yukarıdaki örneği kullanarak deneyelim. IF THEN ELSE durum.

Misal

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;
}

Bu durumda, biz isavailabledeğişken olarak yanlış. Yazdırmak içinelse koşul, yaratmak zorunda kalacağız ng-template aşağıdaki gibi -

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

Tam kod şuna benzer -

<!--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 else koşuluyla kullanılır ve kullanılan değişken condition1. Aynı şey birid için ng-templateve mevcut değişken yanlış olarak ayarlandığında metin Condition is invalid görüntülenir.

Aşağıdaki ekran görüntüsü, tarayıcıdaki ekranı göstermektedir.

Şimdi kullanalım if then else durum.

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;
}

Şimdi değişkeni yapacağız isavailabledoğru. Html'de durum şu şekilde yazılır -

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

Değişken doğruysa, o zaman condition1, Başka condition2. Şimdi, id ile iki şablon oluşturuldu#condition1 ve #condition2.

Tarayıcıdaki ekran aşağıdaki gibidir -