Ich versuche, eine Typoskript-Map zu durchlaufen, erhalte jedoch immer wieder Fehler und konnte noch keine Lösung für ein so triviales Problem finden.

Mein Code lautet:

myMap : Map<string, boolean>;
for(let key of myMap.keys()) {
   console.log(key);
}

Und ich bekomme den Fehler:

Der Typ 'IterableIteratorShim <[string, boolean]>' ist kein Array-Typ oder String-Typ.

Full Stack Trace:

 Error: Typescript found the following errors:
  /home/project/tmp/broccoli_type_script_compiler-input_base_path-q4GtzHgb.tmp/0/src/app/project/project-data.service.ts (21, 20): Type 'IterableIteratorShim<[string, boolean]>' is not an array type or a string type.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/project/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/home/project/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/project/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/project/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/project/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/project/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/project/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Ich verwende Angular-Cli Beta5 und Typoskript 1.8.10 und mein Ziel ist es5. Hat jemand dieses Problem gehabt?

Sie könnten Map.prototype.forEach((value, key, map) => void, thisArg?) : voidstattdessen verwenden

Verwenden Sie es so:

myMap.forEach((value: boolean, key: string) => {
    console.log(key, value);
});

Verwenden Sie einfach die Array.from()Methode, um es in eine zu konvertierenArray :

myMap : Map<string, boolean>;
for(let key of Array.from( myMap.keys()) ) {
   console.log(key);
}

es6

for (let [key, value] of map) {
    console.log(key, value);
}

es5

for (let entry of Array.from(map.entries())) {
    let key = entry[0];
    let value = entry[1];
}

Mit Array.from , Array.prototype.forEach () und Pfeil - Funktionen :

Über die Tasten iterieren :

Array.from(myMap.keys()).forEach(key => console.log(key));

Iterieren Sie über die Werte :

Array.from(myMap.values()).forEach(value => console.log(value));

Durchlaufen Sie die Einträge :

Array.from(myMap.entries()).forEach(entry => console.log('Key: ' + entry[0] + ' Value: ' + entry[1]));

Das hat bei mir funktioniert. TypeScript-Version: 2.8.3

for (const [key, value] of Object.entries(myMap)) { 
    console.log(key, value);
}

Gemäß den Versionshinweisen zu TypeScript 2.3 zu "Neu --downlevelIteration" :

for..of statementsDie Elemente "Array Destructuring" und "Spread" in den Ausdrücken "Array", "Call" und "New" unterstützen Symbol.iterator in ES5 / E3, sofern bei Verwendung verfügbar --downlevelIteration

Dies ist standardmäßig nicht aktiviert! Fügen Sie "downlevelIteration": trueIhr Flag hinzu tsconfig.jsonoder übergeben Sie es --downlevelIterationan tsc, um vollständige Iterator-Unterstützung zu erhalten.

Wenn dies vorhanden ist, können Sie schreiben for (let keyval of myMap) {...}und keyvalder Typ wird automatisch abgeleitet.

Warum ist dies standardmäßig deaktiviert? Nach Typoskript Beitrag @aluanhaddad ,

Es ist optional, da es einen erheblichen Einfluss auf die Größe des generierten Codes und möglicherweise auf die Leistung für alle Verwendungen von Iterables (einschließlich Arrays) hat.

Wenn Sie auf ES2015 ( "target": "es2015"in tsconfig.jsonoder tsc --target ES2015) oder höher downlevelIterationabzielen können, ist das Aktivieren ein Kinderspiel. Wenn Sie jedoch auf ES5 / ES3 abzielen, können Sie einen Benchmark durchführen, um sicherzustellen, dass die Iteratorunterstützung die Leistung nicht beeinträchtigt (wenn dies der Fall ist, sind Sie möglicherweise besser aus mit Array.fromKonvertierung forEachoder einer anderen Problemumgehung).

Das hat bei mir funktioniert.

Object.keys(myMap).map( key => {
    console.log("key: " + key);
    console.log("value: " + myMap[key]);
});

Ich verwende den neuesten TS und Knoten (v2.6 bzw. v8.9) und kann Folgendes tun:

let myMap = new Map<string, boolean>();
myMap.set("a", true);
for (let [k, v] of myMap) {
    console.log(k + "=" + v);
}

Sie können die Array-Map-Methode auch auf die iterable Map.entries () anwenden:

[...myMap.entries()].map(
     ([key, value]: [string, number]) => console.log(key, value)
);

Wie in anderen Antworten erwähnt, müssen Sie möglicherweise die Iteration auf niedriger Ebene in Ihrer Datei tsconfig.json aktivieren (unter Compileroptionen):

  "downlevelIteration": true,

Nur eine einfache Erklärung, um es in einem HTML-Dokument zu verwenden.

Wenn Sie eine Karte mit Typen (Schlüssel, Array) haben, initialisieren Sie das Array folgendermaßen:

public cityShop: Map<string, Shop[]> = new Map();

Und um darüber zu iterieren, erstellen Sie ein Array aus Schlüsselwerten.

Verwenden Sie es einfach als Array wie in:

keys = Array.from(this.cityShop.keys());

Dann können Sie in HTML Folgendes verwenden:

*ngFor="let key of keys"

Innerhalb dieser Schleife erhalten Sie nur den Array-Wert mit:

this.cityShop.get(key)

Getan!

In Typescript 3.5 und Angular 8 LTS musste der Typ wie folgt umgewandelt werden:

for (let [k, v] of Object.entries(someMap)) {
    console.log(k, v)
}

Wenn Sie verschachtelte Funktionen nicht wirklich mögen, können Sie auch über die Tasten iterieren:

myMap : Map<string, boolean>;
for(let key of myMap) {
   if (myMap.hasOwnProperty(key)) {
       console.log(JSON.stringify({key: key, value: myMap[key]}));
   }
}

Beachten Sie, dass Sie die Nicht-Schlüssel-Iterationen mit herausfiltern hasOwnPropertymüssen. Wenn Sie dies nicht tun, erhalten Sie eine Warnung oder einen Fehler.