[Angular] ngFor

ngIf와 비슷한 방식으로 동작한다.

 

예제코드

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  carList = [{name: 'G'}, {name: 'V'}, {name: 'H'}]
  constructor() {

  }

  ngOnInit() {
  }
}

<div *ngFor="let car of carList">{{car.name}}</div>

 

G

V

H

 

가 순서대로 출력된다

 

이때 index도 다음 코드 처럼 적용할 수있다. 

 

<div *ngFor="let car of carList; let i = index">{{car.name + i}}</div>

결과

 

G0

V1

H2