【Angular】ngForでObjectを表示させる際にKey, Valueを利用したい

はじめに

今回はObjectをngForで表示する際に、KeyValueを利用する方法を共有していく。

keyvalueパイプを使う

key-value-example.component.ts

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() {}
}

key-value-example.component.html

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

このように表示された

ちなみにObservableの値であれば、

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

とすれば良い。

参考

• access key and value of object using *ngFor