Iterieren über ngFor loop-Karte mit Schlüssel als string und Werte als map-iteration

Ich bin neu eckig 5 und versuchen zu Durchlaufen, die Karte mit einer anderen Karte, Typoskript.
Iterieren unten diese Art von anzeigen in Winkel -
unten ist der 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 :

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


</ul>

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

github.com/angular/angular/issues/2246
was ist die Lösung, die ich möchte nicht konvertieren meiner map array
stackblitz.com/edit/angular-ifebvj?file=app%2Fapp.module.ts
danke, funktioniert sehr gut
wenn map = new Map<String, Map<String,String>>(); wie funktioniert es

InformationsquelleAutor Feroz Siddiqui | 2018-01-10

37

Für Eckige 6.1+ , die Sie verwenden können Standard-pipe keyvalue :
```
<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>
```
ARBEITEN DEMO

Für die Vorherige version :

Eine einfache Lösung für dieses ist, konvertieren Karte, um array : Array.aus

Komponente Seite :
```
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());
}
```
Vorlage Seite :
```
<ul>
  <li *ngFor="let recipient of getKeys(map)">
    {{recipient}}
   </li>
</ul>
```
ARBEITEN DEMO

wenn map = new Map<String, Map<String,String>>(); wie funktioniert es?
Ich habe aktualisiert die Antwort , und ich denke, die Arbeit wird für jede verschachtelte Ebene.
wir verloren alle Map-Funktion, wenn wir konvertieren es in ein Array schließlich. welchen nutzen hat die Karte dann?
wir konvertieren nur weil wir wollen, um eine Schleife durch eckige Vorlage, wie Sie es wollen einige durchsuchbar zu Durchlaufen. und Sie haben noch ursprüngliche Objekt map zur Verfügung, die Sie verwenden können, die Sie verwenden alle profitieren von Anzeigen
wir haben umgebaut nur um zu zeigen, dass auf der Vorlage Seite , aber Sie haben noch Anzeigen obaject, die Sie verwenden können in der Komponente Seite. Sie können Fragen zu OP why he needed this kind of requirement er kann das erklären besser 🙂

InformationsquelleAutor Vivek Doshi
15

Bearbeiten

Eckige 6.1 und neuere Versionen, verwenden Sie die KeyValuePipe wie vorgeschlagen von Londeren.

Für eckige 6.0 und älter

Dinge einfacher zu machen, können Sie erstellen eine pipe.
```
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">
```
Als es rein, wird es nicht ausgelöst werden bei jeder änderung Erkennung, aber nur, wenn der Verweis auf die map variable ändert

Stackblitz demo

Würde die downvoter bitte Ihr problem erklären?
Ich denke, deine Leitung wird überprüft, ob änderungen und tun es mit voller iteration auf jedem change-detection-Zyklus, da es nicht "rein". Nicht nach unten Stimmen, aber vielleicht ist das, warum?
Die Rohre sind Reine standardmäßig. Wenn Sie eine neue Konsole.log dich in der Pfeife, du wirst sehen, dass es nicht zu bekommen, rufen mehrere Male. Aber-Komponente-Methode die akzeptierte Lösung ist...
Ich habe das rückwärts! Vielen Dank für das heads-up

InformationsquelleAutor David
5

Dies ist, weil map.keys() gibt einen iterator. *ngFor arbeiten mit Iteratoren, aber die map.keys() aufgerufen wird, werden auf jeden change-detection-Zyklus, wodurch eine neue Referenz auf das array, was in der Fehlermeldung, die Sie sehen. Übrigens, das ist nicht immer ein Fehler, wie Sie traditionell denken, es kann auch nicht brechen jede Ihrer Funktionalität, sondern empfiehlt, dass Sie eine Daten-Modell, das verhält sich scheinbar in einer wahnsinnigen Art und Weise - verändert sich schneller als die änderung Detektor prüft seinen Wert.

Wenn Sie nicht möchten, konvertieren Sie die Karte, um ein array in der Komponente, können Sie das pipe-Vorschlag in die Kommentare. Es gibt keine andere Abhilfe, als es scheint.

P. S. Dieser Fehler wird nicht angezeigt in der Produktion-Modus, wie es ist mehr wie eine sehr strenge Warnung, eher als eine tatsächliche Fehler, aber dennoch ist dies nicht eine gute Idee, lassen Sie es sein.

InformationsquelleAutor Armen Vardanyan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.