<\/div>\n

Merhaba,<\/p>\n

Hi\u00e7 d\u00f6ng\u00fcs\u00fcz k\u00fct\u00fcphane g\u00f6rd\u00fcn\u00fcz m\u00fc? Muhtemelen hay\u0131r \ud83d\ude42 Do\u011fal olarak Angular 4’\u00fcn de kendine g\u00f6re bir foreach d\u00f6ng\u00fcs\u00fc mevcuttur. Mant\u0131k desek ayn\u0131, yap\u0131da biraz farkl\u0131. O y\u00fczden ufak bir \u00f6rnekle konuyu noktalayaca\u011f\u0131m.<\/p>\n

\u00d6nceki Angular 4 makalelerimizde olu\u015fturdu\u011fumuz “OrnekProje” isimli projemiz \u00fczerinde \u00f6rnek bir “for-dongusu” isimli component olu\u015ftural\u0131m.<\/p>\n

Componentimizi olu\u015fturduktan sonra “for-dongusu.component.ts” dosyas\u0131n\u0131 a\u00e7al\u0131m ve i\u00e7erisinde a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftirelim.<\/p>\n

\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-for-dongusu',\r\n  templateUrl: '.\/for-dongusu.component.html',\r\n  styleUrls: ['.\/for-dongusu.component.css']\r\n})\r\nexport class ForDongusuComponent implements OnInit {\r\n  Sayilar: number[];\r\n  constructor() {\r\n    this.Sayilar = [3, 5, 7, 9];\r\n  }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funa dikkat ederseniz e\u011fer “Sayilar” isminde say\u0131sal tipte bir dizi de\u011fi\u015fkeni olu\u015fturmakta ve constructor i\u00e7erisinde bu diziye de\u011ferler verilmektedir.<\/p>\n
Bu componentin .html dosyas\u0131nda, burada olu\u015fturulan “Sayilar” de\u011fi\u015fkenine direkt olarak isminden eri\u015febilece\u011fimizden dolay\u0131 bu dizi \u00fczerinde for \u00e7al\u0131\u015fmas\u0131n\u0131 yapabilece\u011fiz.<\/p>\n
\u015eimdi component dosyalar\u0131m\u0131zdan “for-dongusu.component.html” isimli dosyay\u0131 a\u00e7al\u0131m ve i\u00e7erisinde a\u015fa\u011f\u0131daki gibi bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirelim.<\/p>\n
\r\n<ul>\r\n  <li *ngFor="let sayi of Sayilar">\r\n    {{sayi * 5}}\r\n  <\/li>\r\n<\/ul>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Angular 4’te foreach d\u00f6ng\u00fcs\u00fc bu \u015fekilde kullan\u0131lmaktad\u0131r. AngularJS’de ng-repeat olarak kullan\u0131lan d\u00f6ng\u00fc Angular 4’de *ngFor komutuyla restore edilmi\u015ftir. Veri k\u00fcmemiz olan “Sayilar” de\u011fi\u015fkenindeki her bir eleman\u0131 bilinen foreach mant\u0131\u011f\u0131yla tek tek elde etmekte ve bu verileri “let sayi” de\u011fi\u015fkeni ile temsil etmektedir.<\/p>\n
Bu noktadan sonra componenti \u00e7al\u0131\u015ft\u0131rabilmek i\u00e7in mod\u00fcl\u00fcn .html dosyas\u0131 olan “app.component.html” isimli dosya i\u00e7erisine componentimizin selector \u00f6zelli\u011findeki de\u011feri a\u015fa\u011f\u0131daki gibi vermemiz yeterli olacakt\u0131r.<\/p>\n
\r\n<app-for-dongusu><\/app-for-dongusu>\r\n<\/pre>\nProjeyi yay\u0131na ald\u0131\u011f\u0131n\u0131z zaman a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi benzer neticeyle kar\u015f\u0131la\u015facaks\u0131n\u0131z.
\n<\/a><\/p>\n
*ngFor d\u00f6ng\u00fcs\u00fc i\u015fte bu \u015fekilde kullan\u0131lmaktad\u0131r.<\/p>\n
Dikkat ederseniz bu makalede sadece Angular 4’te ki *ngFor d\u00f6ng\u00fcs\u00fcne de\u011finmemi\u015f bulunmakta, bir componentin programatik \u00e7al\u0131\u015fmas\u0131n\u0131 ve teknik olarak nas\u0131l yay\u0131nland\u0131\u011f\u0131n\u0131 tekrar niteli\u011finde bir \u00e7al\u0131\u015fmayla ele alm\u0131\u015f bulunmaktay\u0131m. Bu tekrar\u0131 l\u00fczumsuz g\u00f6ren arkada\u015flara sadece ngFor d\u00f6ng\u00fcs\u00fcn\u00fcn kullan\u0131m\u0131na de\u011finilen sat\u0131rlara g\u00f6z atmalar\u0131n\u0131 \u00f6neririm.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Hi\u00e7 d\u00f6ng\u00fcs\u00fcz k\u00fct\u00fcphane g\u00f6rd\u00fcn\u00fcz m\u00fc? Muhtemelen hay\u0131r \ud83d\ude42 Do\u011fal olarak Angular 4’\u00fcn de kendine g\u00f6re bir foreach d\u00f6ng\u00fcs\u00fc mevcuttur. Mant\u0131k desek ayn\u0131, yap\u0131da biraz farkl\u0131. O y\u00fczden ufak bir \u00f6rnekle konuyu noktalayaca\u011f\u0131m. \u00d6nceki...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2204,2205,2207,2206],"class_list":["post-7403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-ngfor","tag-angular-4-ngfor","tag-angular-4-dongu","tag-angular-4-foreach"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7403"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7403\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}