Question

我开始用给定的数据创建按钮和网格。为此，我创建了一个带有对象的数组。使用数组中的数据，我可以动态创建按钮和网格，但是现在我想这样做，但是我不想使用局部变量来构建网格，而是希望通过API使用给定的数据来创建它们。我的问题是它返回一个Observable而不是一个数组。我试图转换数据并将其推入数组，但是总是出现错误。

我尝试使用“取走”运算符，但总是崩溃。我无法根据需要转换数据以使其再次起作用。

我研究了一个示例项目，您可以在这里查看：https://stackblitz.com/github/mkalden/grid-app

在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调用，该API返回相同的数据结构和内容，但这将是可观察的-并且从哪里开始出现问题...

谁能用一些伪代码编辑我的项目，它可能如何工作，所以我理解其中的逻辑？

非常感谢您的帮助。

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

Answer 1

对可观察的结果使用异步管道：

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

变量末尾的

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

Answer 2

卡拉！感谢你的提问。如果我对您的理解正确，则希望将this.gridItems = this.gridService.items;替换为HTTP调用。

我已经准备了一个stackblitz示例，其中模拟了API调用。

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

P.S。我正在等待您的反馈。

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

2 个答案: