Angular 4 – ngFor Döngüsü

Merhaba,

Hiç döngüsüz kütüphane gördünüz mü? Muhtemelen hayır 🙂 Doğal olarak Angular 4’ün de kendine göre bir foreach döngüsü mevcuttur. Mantık desek aynı, yapıda biraz farklı. O yüzden ufak bir örnekle konuyu noktalayacağım.

Önceki Angular 4 makalelerimizde oluşturduğumuz “OrnekProje” isimli projemiz üzerinde örnek bir “for-dongusu” isimli component oluşturalım.

Componentimizi oluşturduktan sonra “for-dongusu.component.ts” dosyasını açalım ve içerisinde aşağıdaki çalışmayı gerçekleştirelim.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-for-dongusu',
  templateUrl: './for-dongusu.component.html',
  styleUrls: ['./for-dongusu.component.css']
})
export class ForDongusuComponent implements OnInit {
  Sayilar: number[];
  constructor() {
    this.Sayilar = [3, 5, 7, 9];
  }
  ngOnInit() {
  }
}

Yukarıdaki kod bloğuna dikkat ederseniz eğer “Sayilar” isminde sayısal tipte bir dizi değişkeni oluşturmakta ve constructor içerisinde bu diziye değerler verilmektedir.

Bu componentin .html dosyasında, burada oluşturulan “Sayilar” değişkenine direkt olarak isminden erişebileceğimizden dolayı bu dizi üzerinde for çalışmasını yapabileceğiz.

Şimdi component dosyalarımızdan “for-dongusu.component.html” isimli dosyayı açalım ve içerisinde aşağıdaki gibi bir çalışma gerçekleştirelim.

<ul>
  <li *ngFor="let sayi of Sayilar">
    {{sayi * 5}}
  </li>
</ul>

Gördüğünüz gibi Angular 4’te foreach döngüsü bu şekilde kullanılmaktadır. AngularJS’de ng-repeat olarak kullanılan döngü Angular 4’de *ngFor komutuyla restore edilmiştir. Veri kümemiz olan “Sayilar” değişkenindeki her bir elemanı bilinen foreach mantığıyla tek tek elde etmekte ve bu verileri “let sayi” değişkeni ile temsil etmektedir.

Bu noktadan sonra componenti çalıştırabilmek için modülün .html dosyası olan “app.component.html” isimli dosya içerisine componentimizin selector özelliğindeki değeri aşağıdaki gibi vermemiz yeterli olacaktır.

<app-for-dongusu></app-for-dongusu>

Projeyi yayına aldığınız zaman aşağıdaki ekran görüntüsünde olduğu gibi benzer neticeyle karşılaşacaksınız.
Angular 4 - ngFor Döngüsü

*ngFor döngüsü işte bu şekilde kullanılmaktadır.

Dikkat ederseniz bu makalede sadece Angular 4’te ki *ngFor döngüsüne değinmemiş bulunmakta, bir componentin programatik çalışmasını ve teknik olarak nasıl yayınlandığını tekrar niteliğinde bir çalışmayla ele almış bulunmaktayım. Bu tekrarı lüzumsuz gören arkadaşlara sadece ngFor döngüsünün kullanımına değinilen satırlara göz atmalarını öneririm.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 30 Mart 2018

    […] Angular 4 – ngFor Döngüsü […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.