"Enter"a basıp içeriğe geçin

AngularJS 2 *ngFor Döngüsü

Merhaba Angular 2 ile değişen bazı detayları burada fırsat buldukça paylaşma kararı aldım.

app/ts klasöründe bir loop.ts dosyası oluşturdum

import {Component} from 'angular2/core';

@Component({
    selector: '#saydir',
    template: '<ul>' +
    ' <li *ngFor="#veri of araclar">{{veri}}</li> ' +
    '</ul>'
})

export class loop{
    araclar=["araba","tren",]
}
#veri => datayı alarak ekrana bastırılmasını bekliyor
{{veri}} => yukarıdaki #veri den aldığı bilgileri ekrana basacaktır

app/ts klasöründe main.ts dosyasına

import {bootstrap} from 'angular2/platform/browser';
import {loop} from './loop';

bootstrap(loop);

yazdım

index.html(veya yazdırmak istediğimiz sayfa neyse)

<div id="saydir">

</div>

Ekran Çıktısı;

  • araba
  • tren

Notlar;

  1. Selector yaparken seçimi id ise “#saydir” class ise “.saydir” elemen ise “saydir” seçimini yaparsanızda gene çalışır.
  2. loop.ts deki export class ın sonundaki loop sizin çıktınızdır. Bu çıktıyı main.ts deki import {loop} from… ile aynı olmalı yoksa çalışmaz. Aynı şekilde bastırmak için bootstrap(loop); deki loop da aynı olmalıdır zaten import ordan alarak ekrana gönderecek veriyi