typescript - ฉันจะสร้างปุ่มโดยใช้ข้อมูลจาก API ใน Angular แบบไดนามิกได้อย่างไร?

ฉันเริ่มสร้างปุ่มและตารางกริดด้วยข้อมูลที่ให้มา สำหรับจุดประสงค์นั้นฉันสร้างอาร์เรย์ที่มีอ็อบเจ็กต์อยู่ข้างใน ด้วยข้อมูลในอาร์เรย์ฉันสามารถสร้างปุ่มและตารางกริดได้แบบไดนามิก แต่ตอนนี้ฉันต้องการทำเหมือนเดิม แต่แทนที่จะใช้ตัวแปรท้องถิ่นในการสร้างตารางกริด ฉันต้องการสร้างมันด้วยข้อมูลที่ให้มาจาก API ปัญหาของฉันคือมันส่งกลับเป็น Observable ไม่ใช่อาร์เรย์ ฉันพยายามแปลงข้อมูลและดันมันเข้าอาร์เรย์ แต่ฉันก็ยังเจอข้อผิดพลาดอยู่เสมอ

ฉันพยายามใช้ตัวดำเนินการ take และ tap แต่ทุกอย่างก็มักจะล่มอยู่เสมอ ฉันไม่สามารถแปลงข้อมูลตามที่ต้องการให้มันทำงานได้อีก

ในไฟล์ app.component.ts

// I have to change this.gridService.items somehow that it fits with an API
  ngOnInit(): void {
    this.gridItems = this.gridService.items;
  }

ในไฟล์ grid.service.ts ตัวแปรส่วนตัว _items ควรถูกแทนที่ด้วยการเรียก API ซึ่งส่งคืนโครงสร้างข้อมูลและเนื้อหาเดียวกัน แต่จะเป็น Observable -- และนี่คือจุดที่ปัญหาเริ่มต้น...

มีใครสามารถแก้ไขโปรเจกต์ของฉันด้วยโค้ดตัวอย่างบางอย่างว่ามันอาจทำงานได้อย่างไร เพื่อที่ฉันจะได้เข้าใจตรรกะไหม?

ฉันชื่นชมความช่วยเหลือของคุณจริงๆ

ถ้ามีข้อมูลใดขาดหาย โปรดบอกฉันด้วย! ขอบคุณ!

คำตอบ #1

คาร่า! ขอบคุณสำหรับคำถามนะ ถ้าฉันเข้าใจถูกต้อง คุณต้องการที่จะเปลี่ยน this.gridItems=this.gridService.items; ไปเป็นการเรียก HTTP ใช่ไหม

ฉันได้เตรียมตัวอย่าง stackblitz ที่มีการจำลองการเรียก API แล้ว

แนวคิดหลักของฉันคือการใช้ $async pipe กับ Observable<GridItem[]> แทนการดึงข้อมูลแบบซิงค์ อย่าลืมจัดการข้อผิดพลาดจาก API

ป.ล. ฉันกำลังรอความคิดเห็นของคุณอยู่

คำตอบ #2

ใช้ async pipe กับผลลัพธ์ observable ของคุณ:

<div *ngFor="let item of items$ | async">{{ item | json }}</div>

$ ที่ท้ายตัวแปรเป็นธรรมเนียมสำหรับตัวแปรที่เก็บข้อมูลแบบสตรีมในกรณีของ observables ของ Angular.