【Angular】ngFor로 Object를 표시시킬 때 Key, Value를 이용하고 싶다

소개

keyvalue 파이프 사용

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

@Component({
    selector: 'app-key-value-example',
    templateUrl: './key-value-example.component.html',
    styleUrls: ['./key-value-example.component.scss'],
})
export class KeyValueExampleComponent implements OnInit {
    public exampleObject = {
        'イリヤ': '丹下桜',
        'シノブ': '大坪由佳',
        'アカリ': '浅倉杏美',
        'ヨリ': '原紗友里',
        'ミヤコ': '雨宮天',
    };

    constructor() {}

    ngOnInit() {}
}

<ng-container *ngFor="let chara of exampleObject | keyvalue">
    <div>
        <div>キャラクター名：{{chara.key}}</div>
        <div>声優：{{chara.value}}</div>
    </div>
</ng-container>

<ng-container *ngFor="let chara of exampleObject | async | keyvalue">
</ng-container>

참고