angular - การวนซ้ำผ่านอาร์เรย์ของอ็อบเจ็กต์ในไทป์สคริปต์

ฉันกำลังทำงานกับ Angular (ดังนั้นจึงใช้ TypeScript) ในโครงการหนึ่ง ฉันพยายามวนซ้ำผ่านอ็อบเจ็กต์

ฉันสร้างวัตถุในบริการแบบนี้:

class Point {
  id: number;
  name: string; 

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }

}

ฉันเติมอาเรย์ด้วยจุดเหล่านี้ที่ฉันได้มาจากฐานข้อมูล

private pointList: Point[] = [];

ฉันสร้างฟังก์ชันเพื่อดึงคะแนนเหล่านี้กลับมาใน 'คอมโพเนนต์' อื่น ๆ ใน Angular

getPointsList() {
    return this.pointList;
  }

ทั้งหมดนี้ทำในไฟล์ points.service.ts

ดังนั้นปัญหาก็คือ,

ในคอมโพเนนต์อื่นฉันโหลดจุดเหล่านั้นลงในตัวแปรท้องถิ่น

pointList = this.pointsService.getPointsList();

แล้วฉันพยายามวนซ้ำผ่านพวกมันแบบนี้:

console.log(this.pointList); // first consoleLog
for (const point of this.pointList) {
      console.log(point); // second consoleLog
      console.log(point.id); // third consoleLog
}

ทั้งหมดนี้ทำในไฟล์อื่น ในคอมโพเนนต์ map.ts

ผลลัพธ์ของ console.log คือ :

1. อาร์เรย์ที่ประกอบด้วยวัตถุของฉันเช่น: [{id: 1 ชื่อ: 'test'} {id: 2 ชื่อ: 'test2'}] และนั่นก็น่าจะปกติฉันคิดว่า

2. ไม่มีอะไร

3. ไม่มีอะไร

ดังนั้นฉันคิดว่ามันไม่ได้เข้าไปในลูป for เลย แต่ฉันก็ไม่เห็นว่าเป็นเพราะอะไร

ฉันก็ลองด้วย

• ไปที่ console.log(this.pointList[0]) แต่มันคืนค่าเป็น undefined

• this.pointList.forEach(point => {console.log(point)}); แต่มันไม่ได้พิมพ์อะไรออกมา

นี่คือโค้ด 'จริง' ของฉันและสิ่งที่มันแสดงในคอนโซล :

มีใครบอกฉันได้ไหมว่าฉันทำผิดตรงไหน?

ขอบคุณ

คำตอบ #1

ใช้ for (const point of this.pointList) { แทน

เพราะในการวนซ้ำไปยังคีย์ทั้งหมดของอ็อบเจ็กต์รวมถึงโปรโตไทป์ของมัน ดังนั้นถ้าคุณต้องการใช้มันคุณต้องจำเรื่อง if (this.pointList.hasOwnProperty(point) { ไว้ สำหรับ of เป็นแบบย่อของเรื่องนั้น

คุณยังสามารถใช้ this.pointList.forEach(point => {... ได้ อีกด้วย ส่วนตัวแล้วนี่เป็นวิธีที่ฉันชอบที่สุดเพราะคุณสามารถเชื่อมมันกับวิธี .map, .filter, หรือ .find ได้

คำตอบ #2

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

console.log(this.pointList);

แต่นี่เป็นเพราะอาร์เรย์ที่แสดงในหน้าต่างคอนโซลเป็นแบบไดนามิก: มันจะแสดงค่าตามที่มีในขณะที่คุณขยายอาร์เรย์ในหน้าต่างคอนโซล ไม่ใช่ตามที่เป็นเมื่อคำสั่ง console.log ถูกประมวลผล

ในการดูอาเรย์ตามที่มันเป็นเมื่อคำสั่ง console.log ถูกเรียกใช้ ให้ใช้คำสั่งดังต่อไปนี้:

console.log(JSON.stringify(this.pointList));