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>
javascript
angular
typescript
angular-cli
Feroz Siddiqui
quelle
quelle
Antworten:
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
quelle
map
Verfügung, können Sie dieses verwenden, um alle Vorteile von Mapwhy he needed this kind of requirement
, er kann Sie besser erklären :)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']]); }
quelle
map
Typ verfügbare Out-of-the-Box-Rohr gesehen hatte, das sich um die Verwendung mit*ngFor
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
map
Variable ändertStackblitz-Demo
quelle
Dies liegt daran, dass
map.keys()
ein Iterator zurückgegeben wird.*ngFor
kann 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.
quelle
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>
quelle
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; }
quelle