Map Pipe doesn't work

Question

I try to display key/values of my map which is <string, string[]> .

I have this pipe:

import { PipeTransform, Pipe } from "@angular/core";

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(value, args: string[]): any {
        let keys = [];
        console.info('KeysPipe');
        for (let key in value) {
            console.info("add");
            keys.push({ key: key, value: value[key] });
        }
        return keys;
    }
}

This map in controller :

this.testMap.set("hi", ['hello', 'bye']);

And the view :

<div class="ui-g" *ngFor="let entry of testMap | keys">
    Key: {{entry.key}}, value: {{entry.value}}
</div>

From what I see my pipe is called as I see the console.info('KeysPipe'); but it never enter the loop as I don't see any console.info("add");

Any tips?

Answer 1

testMap is likely Map , and maps aren't supposed to be iterated with for..in . value doesn't have enumerable properties, that's the reason why console.info("add") never triggers.

If the pipe is limited to maps, it should be

transform(map: Map): any {
  return Array.from(map).map(([key, value]) => ({ key, value }));
}