Comment itérer à l'aide de ngFor loop Carte contenant la clé comme chaîne et les valeurs que l'itération de la carte

Question

Je suis nouveau à angulaire 5 et en essayant d'itérer la carte contenant une autre carte en typescript. Comment itérer ci-dessous ce genre de carte en anguleux ci-dessous est le code pour le composant:

et son modèle html est :

Answer 1

Angulaire 6.1+ , vous pouvez utiliser la valeur par défaut de la pipe keyvalue ( examinent et upvote aussi ) :

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

TRAVAIL DE DÉMONSTRATION

---

Pour la version précédente :

Une solution simple pour cela est de convertir la carte de tableau : Tableau.à partir de

Côté Composants :

map = new Map<String, String>();

constructor(){
    this.map.set("sss","sss");
    this.map.set("aaa","sss");
    this.map.set("sass","sss");
    this.map.set("xxx","sss");
    this.map.set("ss","sss");
    this.map.forEach((value: string, key: string) => {
        console.log(key, value);
    });
}

getKeys(map){
    return Array.from(map.keys());
}

Modèle De Côté :

<ul>
  <li *ngFor="let recipient of getKeys(map)">
    {{recipient}}
   </li>
</ul>

TRAVAIL DE DÉMONSTRATION

Answer 2

Si vous utilisez Angular 6.1 ou plus tard, le moyen le plus pratique est d'utiliser KeyValuePipe

<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js"> <div class="snippet-code">

</div></div>

Answer 3

Modifier

Angulaire 6.1 et versions plus récentes, l'utilisation de la KeyValuePipe comme suggéré par Londeren.

Angulaire 6.0 et plus

Pour faciliter les choses, vous pouvez créer un canal.

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

@Pipe({name: 'getValues'})
export class GetValuesPipe implements PipeTransform {
    transform(map: Map<any, any>): any[] {
        let ret = [];

        map.forEach((val, key) => {
            ret.push({
                key: key,
                val: val
            });
        });

        return ret;
    }
}

 <li *ngFor="let recipient of map |getValues">

Comme il est pur, il ne sera pas déclenchée à chaque changement de détection, mais seulement si la référence à l' map modification de la variable

Stackblitz démo

Answer 4

C'est parce qu' map.keys() retourne un itérateur. *ngFor peuvent travailler avec les itérateurs, mais l' map.keys() sera appelée à chaque changement de cycle de détection, produisant ainsi une nouvelle référence à la matrice, ce qui entraîne l'erreur que vous voyez. Par ailleurs, ce n'est pas toujours une erreur , comme vous le feriez traditionnellement pensez à elle; il peut même ne pas tout casser votre fonctionnalité, mais suggère que vous avez un modèle de données qui semble se comporter dans une folle moyen - change plus vite que le changement détecteur vérifie sa valeur.

Si vous ne voulez pas de convertir la carte à un tableau dans votre composant, vous pouvez utiliser le tuyau suggéré dans les commentaires. Il n'y a pas d'autre solution, comme il semble.

P. S. Cette erreur ne sera pas indiqué dans le mode de production, car il est plus comme un très stricte avertissement, plutôt que d'une réelle erreur, mais encore, ce n'est pas une bonne idée de le laisser être.