[Angular] 리스트 생성, ngFor

이미지 출처 : Pixabay

지난번 글에서 생성한 employee 클래스를 통하여 리스트를 만들고 이를 뷰 상에 전시해 보겠습니다.

Reference : https://angular.io/tutorial/toh-pt1

Angular

/src/app/employees 경로에 employeeList.ts 파일을 만들고 다음과 같이 작성해줍니다.

//employeeList.ts

import { Employee } from './employee';

export const EMPLOYEES: Employee[] = [
  { id: 11, name: 'Sean'},
  { id: 12, name: 'Andy'},
  { id: 13, name: 'Cindy'},
  { id: 14, name: 'Anne'},
  { id: 15, name: 'Clara'},
  { id: 16, name: 'Bonnie'},
  { id: 17, name: 'Jin'},
  { id: 18, name: 'Andrew'},
  { id: 19, name: 'Nicolas'},
  { id: 20, name: 'Gary'},
];

 

그리고 employees.component.ts 파일에 임의로 작성한 employees 인스턴스를 제거하고 다음과 같이 리스트를 삽입합니다.

//employees.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from './employee';
import { EMPLOYEES } from './employeeList';

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
  employees: Employee[] = EMPLOYEES;

  constructor() { }

  ngOnInit() {
  }

}

 

이렇게 가져온 리스트들을 뷰 상에서 보여주기 위해서는 ngFor 반복문을 사용하여야 합니다.

다음과 같이 리스트를 만듧니다.

<!-- employees.component.html -->

<h2>Employees</h2>
<ul class="employees">
  <li *ngFor="let employee of employees">
    <span>id : {{employee.id}}, name : {{employee.name}}</span>
  </li>
</ul>

 

실행 화면은 다음과 같습니다.

localhost:4200

ngFor은 ts 파일 내부의 Array와 바인딩됩니다.

ngFor 앞의 *은 HTML template를 의미하며, li 형태로 리스트를 작성하는 경우 이를 반복하는 역할을 수행합니다.

정리하면, *ngFor 지시자는 바인딩 된 배열을 순회하며 해당 내용물을 가지고 태그를 반복해서 만들게 됩니다.

Reference : https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

Angular