MapToIterable en tuyau angulaire avec TypeScript

Question

Essayer de mettre en place un tuyau en Angulaire. Après avoir réalisé ngFor ne fonctionnerait pas avec les cartes. Certaines recherches m'ont amené à croire que de nouvelles fonctionnalités viendraient à traiter de cela, mais en attendant, un tuyau cartographique était la réponse.

J'ai le code suivant:

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

@Pipe({ 
    name: 'mapToIterable' 
}) 
export class MapToIterablePipe implements PipeTransform { 
    transform(map: Map<string, Object>, args: any = []): any { 
    const a: any[] = []; 
    console.log(map.keys()); // <- works as expected 
    for (const k in map) { 
     if (map.has(k)) { 
     console.log("hello"); // <- never executes 
     console.log(k); 
     a.push({key: k, val: map.get(k)}); 
     } 
    } 
    console.log(a); // <- always empty 
    return a; 
    } 
} 

export const MAPTOITERABLE_PROVIDERS = [ 
    MapToIterablePipe 
]; 

map.keys() me donne une liste de clés correctes, mais rien ne fonctionne.

Une suggestion sur la façon de diagnostiquer pourquoi ma boucle ne remplit pas le tableau correctement?

Answer 1

Map « clés » ne sont pas objet clés et ne peuvent pas être obtenus avec Object.keys() ou opérateur in.

Considérant que map.keys() renvoie un itérable, il devrait être

for (const key of Array.from(map.keys())) { 
    // this check is unneeded 
    // if (map.has(k)) { 
    ... 
} 

Ou dans TypeScript 2.3 with downlevelIteration option,

for (const key of map.keys()) { ... } 

Ou

const a: any[] = Array.from(map.entries()).map(([key, val]) => ({ key, val })); 

En raison de la façon dont tapuscrit implémente l'opérateur de diffusion, [...iterable] ne fonctionnera pas de la même manière que Array.from(iterable) en 2.2 et moins.