Angular \u015eablonlar\u0131nda @let Y\u00f6nergesi: Tam Bir K\u0131lavuz<\/p>\n
Merhaba! Ben Fatih Soysal ve bu yaz\u0131da Angular’\u0131n g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 bir \u00f6zelli\u011fi olan Bu \u00f6rnekte, Bu kodda, @let<\/code> y\u00f6nergesini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu y\u00f6nerge, Angular \u015fablonlar\u0131nda daha temiz ve okunabilir kod yazman\u0131za yard\u0131mc\u0131 olur. \u00d6zellikle karma\u015f\u0131k veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken olduk\u00e7a faydal\u0131d\u0131r.<\/p>\n@let Y\u00f6nergesinin Temelleri<\/h2>\n
@let<\/code> y\u00f6nergesi, Angular \u015fablonlar\u0131nda bir de\u011fi\u015fken olu\u015fturmak ve bu de\u011fi\u015fkene bir de\u011feri atamak i\u00e7in kullan\u0131l\u0131r. Bu, karma\u015f\u0131k ifadelerin veya d\u00f6ng\u00fclerin i\u00e7inde daha temiz ve okunabilir kod yazman\u0131za olanak tan\u0131r. \u00d6nceki y\u00f6ntemlere g\u00f6re daha az tekrarl\u0131 ve daha \u00f6z bir yakla\u015f\u0131m sunar. Basit\u00e7e s\u00f6ylemek gerekirse, @let<\/code> size \u015fablonunuzda ge\u00e7ici de\u011fi\u015fkenler olu\u015fturma imkan\u0131 verir.<\/p>\nKullan\u0131m \u00d6rnekleri<\/h2>\n
@let<\/code> y\u00f6nergesini anlamak i\u00e7in baz\u0131 \u00f6rnekleri inceleyelim. Diyelim ki bir dizi nesneye sahipsiniz ve bu nesnelerin \u00f6zelliklerini \u015fablonunuzda g\u00f6r\u00fcnt\u00fclemek istiyorsunuz. \u0130\u015fte @let<\/code> kullanarak bunu nas\u0131l yapabilece\u011finize dair bir \u00f6rnek:<\/p>\n\n<ul>\n <li *ngFor=\"let item of items\">\n <p>Ad: <span *ngIf=\"item.name; else noName\">{{ item.name }}<\/span><\/p>\n <ng-template #noName>\n <p>Ad Yok<\/p>\n <\/ng-template> \n <\/li>\n<\/ul>\n<\/code><\/pre>\n*ngFor<\/code> d\u00f6ng\u00fcs\u00fc i\u00e7inde her bir item<\/code> nesnesinin name<\/code> \u00f6zelli\u011fi g\u00f6r\u00fcnt\u00fcleniyor. Ancak item.name<\/code> de\u011feri her zaman mevcut olmayabilir. Bu durumda hata al\u0131r\u0131z. @let<\/code> kullanarak durum kontrol\u00fcn\u00fc kolayla\u015ft\u0131rabiliriz: <\/p>\n\n<ul>\n <li *ngFor=\"let item of items; let i = index\">\n <p>{{i+1}}. \u00d6\u011fe: {{ item.name || 'Ad belirtilmemi\u015f' }}<\/p>\n <\/li>\n<\/ul>\n<\/code><\/pre>\nitem.name<\/code> de\u011feri yoksa varsay\u0131lan olarak ‘Ad belirtilmemi\u015f’ yazd\u0131r\u0131l\u0131r. Bu, kodun daha temiz ve okunabilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nAsync Borular\u0131yla @let Kullan\u0131m\u0131<\/h2>\n
@let<\/code> y\u00f6nergesi, asenkron i\u015flemlerden d\u00f6nen verilerle de kullan\u0131labilir. \u00d6rne\u011fin, bir HTTP iste\u011finden gelen verileri g\u00f6r\u00fcnt\u00fclemek i\u00e7in async<\/code> borusuyla birlikte kullanabiliriz. Bu durumdaki kodun daha okunabilir olmas\u0131na b\u00fcy\u00fck katk\u0131 sa\u011flar.<\/p>\n\n<div *ngIf=\"data$ | async as data\">\n <p>Veri: {{ data.value }}<\/p>\n<\/div>\n<\/code><\/pre>\n