ฉันกำลังพยายามทำซ้ำบนแผนที่ typescript แต่ฉันได้รับข้อผิดพลาดอยู่เรื่อย ๆ และยังไม่พบวิธีแก้ปัญหาใด ๆ สำหรับปัญหาเล็กน้อยดังกล่าว

รหัสของฉันคือ:

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

และฉันได้รับข้อผิดพลาด:

พิมพ์ 'IterableIteratorShim <[string, boolean]>' ไม่ใช่ประเภทอาร์เรย์หรือประเภทสตริง

การติดตามกองเต็ม:

 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)

ฉันใช้ angular-cli beta5 และ typescript 1.8.10 และเป้าหมายของฉันคือ es5 มีใครมีปัญหานี้บ้าง?

คุณสามารถใช้Map.prototype.forEach((value, key, map) => void, thisArg?) : voidแทนได้

ใช้แบบนี้:

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

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];
}

เพียงแค่ใช้Array.from()วิธีการแปลงเป็นArray:

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

การใช้Array.from , Array.prototype.forEach ()และฟังก์ชันลูกศร :

ย้ำคีย์ :

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

วนซ้ำค่า :

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

วนซ้ำรายการ :

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

สิ่งนี้ได้ผลสำหรับฉัน เวอร์ชัน TypeScript: 2.8.3.2

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

ตามบันทึกประจำรุ่น TypeScript 2.3 เรื่อง "ใหม่--downlevelIteration" :

for..of statements, Array Destructuring, และ Spread องค์ประกอบใน Array, Call และนิพจน์ใหม่รองรับ Symbol.iterator ใน ES5 / E3 หากมีเมื่อใช้ --downlevelIteration

ไม่ได้เปิดใช้งานโดยค่าเริ่มต้น! เพิ่ม"downlevelIteration": trueลงในแฟล็กของคุณtsconfig.jsonหรือส่งผ่าน--downlevelIterationไปที่tscเพื่อรับการสนับสนุนตัววนซ้ำแบบเต็ม

ด้วยสิ่งนี้คุณสามารถเขียนfor (let keyval of myMap) {...}และkeyvalประเภทของจะถูกอนุมานโดยอัตโนมัติ

เหตุใดสิ่งนี้จึงถูกปิดโดยค่าเริ่มต้น ตาม typescript ส่วนร่วม@aluanhaddad ,

เป็นทางเลือกเนื่องจากมีผลกระทบอย่างมากต่อขนาดของโค้ดที่สร้างขึ้นและอาจมีผลต่อประสิทธิภาพสำหรับการใช้งานซ้ำทั้งหมด (รวมถึงอาร์เรย์)

หากคุณสามารถกำหนดเป้าหมาย ES2015 ( "target": "es2015"ในtsconfig.jsonหรือtsc --target ES2015) หรือใหม่กว่าได้การเปิดใช้งานdownlevelIterationไม่ใช่เรื่องง่าย แต่หากคุณกำหนดเป้าหมาย ES5 / ES3 คุณอาจเปรียบเทียบเพื่อให้แน่ใจว่าการสนับสนุนตัววนซ้ำจะไม่ส่งผลกระทบต่อประสิทธิภาพ (ถ้าเป็นเช่นนั้นคุณอาจจะดีกว่า ปิดด้วยArray.fromการแปลงหรือforEachหรือวิธีแก้ปัญหาอื่น ๆ )

สิ่งนี้ได้ผลสำหรับฉัน

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

ฉันใช้ TS และโหนดล่าสุด (v2.6 และ v8.9 ตามลำดับ) และฉันสามารถทำได้:

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

คุณยังสามารถใช้วิธีการแม็พอาร์เรย์กับ Map.entries () ซ้ำได้:

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

ตามที่ระบุไว้ในคำตอบอื่น ๆ คุณอาจต้องเปิดใช้งานการวนซ้ำระดับลงใน tsconfig.json ของคุณ (ภายใต้ตัวเลือกคอมไพเลอร์):

  "downlevelIteration": true,

คำอธิบายง่ายๆสำหรับใช้ในเอกสาร HTML

หากคุณมีแผนที่ประเภท (คีย์อาร์เรย์) คุณจะเริ่มต้นอาร์เรย์ด้วยวิธีนี้:

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

และในการวนซ้ำคุณสร้างอาร์เรย์จากค่าคีย์

เพียงใช้เป็นอาร์เรย์ใน:

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

จากนั้นใน HTML คุณสามารถใช้:

*ngFor="let key of keys"

ภายในลูปนี้คุณจะได้รับค่าอาร์เรย์ด้วย:

this.cityShop.get(key)

ทำ!

ใน typescript 3.5 และ Angular 8 LTS จำเป็นต้องใช้ประเภทดังนี้:

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

หากคุณไม่ชอบฟังก์ชั่นที่ซ้อนกันจริงๆคุณสามารถทำซ้ำบนปุ่มต่างๆ:

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

หมายเหตุคุณต้องกรองการทำซ้ำที่ไม่ใช่คีย์ด้วยhasOwnPropertyถ้าคุณไม่ทำเช่นนี้คุณจะได้รับคำเตือนหรือข้อผิดพลาด