Angular 2
ngfor 사용법

소개

정렬되지 않은 목록 예제

<ul>
  <li *ngFor="let item of items">{{item.name}}</li>
</ul>

더 복잡한 템플릿 예제

<div *ngFor="let item of items">
  <p>{{item.name}}</p>
  <p>{{item.price}}</p>
  <p>{{item.description}}</p>
</div>

현재 상호 작용 사례 추적

<div *ngFor="let item of items; let i = index">
  <p>Item number: {{i}}</p>    
</div>

이 경우 인덱스의 값을 취합니다.이 값은 현재 루프 반복입니다.

Angular2 별칭 내보내기 값

Angular2는 로컬 변수에 별명을 지정할 수있는 여러 가지 내 보낸 값을 제공합니다. 이것들은:

• 색인
• 먼저
• 마지막
• 조차
• 이상한

index 제외하고 다른 것들은 Boolean 값 Boolean 집니다. 인덱스를 사용하는 이전 예제와 같이 다음과 같은 내 보낸 값 중 하나를 사용할 수 있습니다.

<div *ngFor="let item of items; let firstItem = first; let lastItem = last">
  <p *ngIf="firstItem">I am the first item and I am gonna be showed</p>
  <p *ngIf="firstItem">I am not the first item and I will not show up :(</p>
  <p *ngIf="lastItem">But I'm gonna be showed as I am the last item :)</p>
</div>

* 파이프가있는 경우

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'even'
})

export class EvenPipe implements PipeTransform {
    transform(value: string): string {
        if(value && value %2 === 0){
          return value;
        }
    }
}

@Component({
      selector: 'example-component',
      template: '<div>
                      <div *ngFor="let number of numbers | even">
                          {{number}}
                      </div>
                </div>'
})

export class exampleComponent {
    let numbers : List<number> = Array.apply(null, {length: 10}).map(Number.call, Number)
}