So iterieren Sie mit ngFor loop Map, die Schlüssel als Zeichenfolge und Werte als Karteniteration enthält

Ich bin neu in Winkel 5 und versuche, die Karte zu wiederholen, die eine andere Karte in Typoskript enthält. Wie man unter dieser Art von Karte im Winkel unten iteriert, ist Code für Komponente:

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

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map = new Map<String, Map<String,String>>();
  map1 = new Map<String, String>();

  constructor() { 


  }

  ngOnInit() {
    this.map1.set("sss","sss");
    this.map1.set("aaa","sss");
    this.map1.set("sass","sss");
    this.map1.set("xxx","sss");
    this.map1.set("ss","sss");


    this.map1.forEach((value: string, key: string) => {
      console.log(key, value);

    });


    this.map.set("yoyoy",this.map1);

  }



}

und seine Vorlage HTML ist:

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


</ul>

<div>{{map.size}}</div>

Für Angular 6.1+ können Sie die Standardpipe verwenden keyvalue( überprüfen und bewerten Sie auch ):

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

ARBEITSDEMO

Für die vorherige Version:

Eine einfache Lösung hierfür ist die Konvertierung von Map in Array: Array.from

Komponentenseite:

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

Vorlagenseite:

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

ARBEITSDEMO

Wenn Sie Angular 6.1 oder höher verwenden, ist die Verwendung von KeyValuePipe die bequemste Methode

   @Component({
      selector: 'keyvalue-pipe',
      template: `<span>
        <p>Object</p>
        <div *ngFor="let item of object | keyvalue">
          {{item.key}}:{{item.value}}
        </div>
        <p>Map</p>
        <div *ngFor="let item of map | keyvalue">
          {{item.key}}:{{item.value}}
        </div>
      </span>`
    })
    export class KeyValuePipeComponent {
      object: Record<number, string> = {2: 'foo', 1: 'bar'};
      map = new Map([[2, 'foo'], [1, 'bar']]);
    }

Bearbeiten

Für Winkel 6.1 und neuer, verwenden Sie die KeyValuePipe wie Londeren vorgeschlagen.

Für Winkel 6.0 und älter

Zur Vereinfachung können Sie eine Pipe erstellen.

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">

Da es rein ist, wird es nicht bei jeder Änderungserkennung ausgelöst, sondern nur, wenn sich der Verweis auf die mapVariable ändert

Stackblitz-Demo

Dies liegt daran, dass map.keys()ein Iterator zurückgegeben wird. *ngForkann mit Iteratoren arbeiten, map.keys()wird jedoch bei jedem Änderungserkennungszyklus aufgerufen, wodurch eine neue Referenz auf das Array erstellt wird, was zu dem angezeigten Fehler führt. Dies ist übrigens nicht immer ein Fehler, wie Sie es traditionell denken würden. Es kann sogar sein, dass es Ihre Funktionalität nicht beeinträchtigt, deutet jedoch darauf hin, dass Sie ein Datenmodell haben, das sich verrückt zu verhalten scheint - es ändert sich schneller, als der Änderungsdetektor seinen Wert überprüft.

Wenn Sie die Map nicht in ein Array in Ihrer Komponente konvertieren möchten, können Sie die in den Kommentaren vorgeschlagene Pipe verwenden. Wie es scheint, gibt es keine andere Problemumgehung.

PS Dieser Fehler wird im Produktionsmodus nicht angezeigt, da es sich eher um eine sehr strenge Warnung als um einen tatsächlichen Fehler handelt. Dennoch ist es keine gute Idee, ihn zu belassen.

Wie bereits in den Kommentaren erwähnt, behält die keyvalue-Pipe nicht die Reihenfolge des Einfügens bei (was der Hauptzweck von Map ist).

Wie auch immer, es sieht so aus, als ob Sie ein Map-Objekt haben und die Reihenfolge beibehalten möchten. Der sauberste Weg, dies zu tun, ist die Funktion entry ():

<ul>
    <li *ngFor="let item of map.entries()">
        <span>key: {{item[0]}}</span>
        <span>value: {{item[1]}}</span>
    </li>
</ul>

Der folgende Code ist nützlich, um ihn in der Reihenfolge der Karteneinfügung anzuzeigen .

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

.ts-Datei fügen Sie den folgenden Code hinzu.

asIsOrder(a, b) {
    return 1;
}