angular - 如何使用 Angular 中的 API 数据动态创建按钮？

Question

我开始使用给定的数据创建按钮和网格。为此，我创建了一个包含对象的数组。使用数组中的数据，我动态创建按钮和网格，但现在我想做同样的事情，但不是使用局部变量来构建网格，而是我想通过 API 使用给定数据创建它们。我的问题是它返回一个 Observable 而不是一个数组。我尝试转换数据并将其推送到数组中，但我总是遇到错误。

我尝试使用 take and 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 中，私有(private)变量 _items 应该替换为返回相同数据结构和内容的 API 调用，但它将是一个 Observable——问题从哪里开始……

任何人都可以使用一些虚拟代码来编辑我的项目，让我理解其中的逻辑吗？

非常感谢您的帮助。

如有遗漏，请告诉我!谢谢!

Answer 1

卡拉!感谢你的提问。如果我没理解错的话，你想更换你的 this.gridItems = this.gridService.items;到 HTTP 调用。

我准备了一个 stackblitz模拟 API 调用的示例。

我的主要想法是使用 $async管道 Observable<GridItem[]>而不是同步获取。不要忘记处理来自 API 的错误。

附言我正在等待您的反馈。