Angular에서 객체(Object)의 값 리스트 불러오기

Angular(특히 Angular 2+)에서 JavaScript 객체의 값들만 리스트로 추출하거나 템플릿에서 반복해서 사용하는 방법을 정리하겠습니다. 객체는 배열이 아니기 때문에 *ngFor로 직접 반복할 수 없지만, 몇 가지 방법으로 쉽게 처리할 수 있습니다.

1. TypeScript 코드에서 값 리스트 추출 (Object.values())

가장 간단한 방법은 JavaScript의 내장 메서드 Object.values()를 사용하는 것입니다. 이 메서드는 객체의 값들만 배열로 반환합니다.

예시 코드 (컴포넌트 TS 파일)

 

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  myObject = {
    name: '홍길동',
    age: 30,
    city: '서울',
    job: '개발자'
  };

  // 값들만 배열로 추출
  objectValues: any[] = Object.values(this.myObject);
}

템플릿에서 사용 (HTML)

 

<h3>객체의 값 리스트</h3>
<ul>
  <li *ngFor="let value of objectValues">
    {{ value }}
  </li>
</ul>

출력 결과:

• 홍길동
• 30
• 서울
• 개발자

주의: Object.values()는 ES2017+에서 지원되며, Angular는 기본적으로 지원합니다. 키가 필요 없다면 이 방법이 가장 깔끔합니다.

2. 템플릿에서 직접 값 반복 (KeyValuePipe 사용)

Angular 6.1+부터 제공되는 keyvalue 파이프를 사용하면 컴포넌트에서 별도 처리 없이 템플릿에서 바로 객체를 반복할 수 있습니다. 값만 필요하다면 item.value만 사용하세요.

템플릿 예시

<h3>객체 값만 출력 (keyvalue 파이프)</h3>
<ul>
  <div *ngFor="let item of myObject | keyvalue">
    <li>{{ item.value }}</li>
  </div>
</ul>

키와 값 모두 출력하고 싶을 때

<ul>
  <li *ngFor="let item of myObject | keyvalue">
    {{ item.key }}: {{ item.value }}
  </li>
</ul>

장점: 컴포넌트 코드 변경 없이 템플릿에서 바로 사용 가능. 주의: 정렬은 키의 유니코드 순서로 기본 정렬됩니다. 커스텀 정렬이 필요하면 비교 함수를 추가할 수 있습니다.

3. 키를 이용한 반복 (구버전 호환 또는 커스텀 필요 시)

Angular 초기 버전이나 더 세밀한 제어가 필요할 때는 Object.keys()로 키 배열을 만든 후 반복합니다.

// 컴포넌트
objectKeys(): string[] {
  return Object.keys(this.myObject);
}

 

<ul>
  <li *ngFor="let key of objectKeys()">
    {{ myObject[key] }}  <!-- 값 출력 -->
  </li>
</ul>

요약 비교

방법	값만 출력	키+값 출력	Angular 버전	비고
Object.values() + 배열	O	X	모든 버전	가장 간단, TS에서 처리
keyvalue 파이프	O (item.value)	O	6.1+	템플릿에서 바로 사용 가능
Object.keys() + 메서드	O	O	모든 버전	구버전 호환 좋음

실무에서는 Angular 6+라면 keyvalue 파이프를, 값만 필요하고 성능을 고려한다면 Object.values()를 추천합니다!