如何使用 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 中，私有变量 _items 应该替换为一个 API-Call，它返回相同的数据结构和内容，但它是一个 Observable —— 问题从哪里开始......

任何人都可以用一些虚拟代码编辑我的项目，它是如何工作的，所以我理解逻辑？

我真的很感激你的帮助。

如果缺少任何信息，请告诉我！ 谢谢！

Answer 1

在可观察结果上使用异步管道：

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

变量末尾的$是在角度观察的情况下包含流数据的变量的约定。

Answer 2

卡拉！ 感谢你的提问。 如果我理解正确，你想替换你的this.gridItems = this.gridService.items; 到 HTTP 调用。

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

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

PS 我正在等待您的反馈。