在 ngOnInit 上调用 Angular 服务，显示“未定义”，不显示图标答案

【问题标题】：Angular Service being called on ngOnInit showing 'undefined', not showing icons在 ngOnInit 上调用 Angular 服务，显示“未定义”，不显示图标
【发布时间】：2018-09-21 22:07:19
【问题描述】：

在以下Blitz 上，当尝试访问 blob 存储 API 时，我在控制台中收到以下错误：

ERROR
Error: Cannot set property 'id' of undefined**

我怀疑错误与我编写服务的方式有关，也许我应该使用 BehaviorSubject 而不是 HTTPClient，然后将 xml 解析为 json 对象。或者可能与异步调用有关。关键是当this.fileservice.add() 在 ngOnInit 函数内时创建图标。

ngOnInit() {

  this.getAzureFiles();

  this.fileService.add({ Name: 'File 7', isFolder: false, parent: 'root' });

  this.updateFileElementQuery();
}

所以在该函数内部，我只是将其替换为来自 azure 的解析响应，这应该可以。但是它给了我上述错误。

基本上我需要 blob API 在我的前端显示为图标。

【问题讨论】：

在getAzureFiles 中，this.fileService.add(this.azureFiles); 行应该在订阅回调的内部，在调用anotherFunction 之后。在您的原始代码中，您尝试在设置之前使用this.azureFiles。见this stackblitz。
How do I return the response from an Observable/http/async call in angular2?的可能重复
是的。我这样做了，但是您可以看到该图标未显示。仅当 this.fileService.add(whatever) 在订阅函数之外时才会显示图标
我看到一个“文件夹 A”图标。你说的是那个图标吗？
文件夹A图标是硬编码的，见ngOnInit中的第32行

标签： javascript angular typescript azure rxjs

【解决方案1】：

您必须在订阅中移动 fileService 添加函数调用，并在该行之后调用 this.updateFileElementQuery()。

您可以找到解决方案here

【讨论】：