问题标签 [angular2-http]

我正在尝试从 api 获取 JSON 数据并使用 angular 2 显示其内容。对话组件：

对话服务：

由于某种原因 this.conversation 是未定义的。在将响应映射到服务文件上的 json 后，我尝试立即提醒响应：它显示“对象：对象”

任何帮助都感激不尽。

这里是 Angular2 的新手，想知道如何对数组模式执行此异步请求（不太确定模式名称）。

因此，假设我使用 Angular2Http获取包含videoId在每个返回项目中的 YouTube 播放列表。然后，我需要使用 循环浏览此项目，videoId并向 YouTube 发出另一个请求以获取各个视频信息。这可以是另一个常见的 HTTP 请求，获取列表然后遍历列表并获取每个单独项目的详细信息。

所以上面的代码确实有效。但我仍然有这两个问题：

1. 我如何加入videoData后面data.items并确保里面的正确项目data.items与正确videoData的（videoData使用entry.id.videoId里面相关项目的data.items）连接并创建新的newArray？

2. 在所有异步请求完成后，我如何知道一切何时完成并根据所有数据执行某些操作？

3. newArray 保持与第一个 HTTP 请求相同的顺序。作为第一个按 viewCount 排序的 HTTP 访问 YouTube 搜索列表 API。像上面这样简单地嵌套 observable 不会保持原始顺序。

更新

使用inoabrian解决方案，我可以成功实现以上三点。但是当我再次调用 myvideoservice（比如将 url 更改为新的 NextPageToken）时，Subject - this._videoObject 有 2 个观察者。再次加载，它有 3 个观察者，依此类推。我需要一种方法将主题重置为只有 1 个观察者，这样我就不会有重复的视频。这是清除/重置主题的最佳实践方式吗？

我想发出一个 http get 请求，该请求返回要在ngFor循环中使用的 json 数据数组。我不确定执行此操作的最佳方法。this.list是ngFor指令中要循环的列表。出于测试目的，json 文件位于我的本地计算机上。我已经查看了 Angular 2 文档，以及为此的 udemy 课程，但无法弄清楚。我怀疑这很简单。

带有ngFor指令的组件。

获取请求位于服务中

这是需要数据的 ngfor。

现在例外：运行此代码时在控制台中抛出 [object Object]。

我有一个 post 方法正在工作并从服务器获取我的令牌

其中this.server是具有服务器 url 的字符串。并且this._http只是 Angular Http 的一个实例

并且this.token只是一个空字符串private token: string;

现在这一切工作得很好，我从服务器获得了正确的令牌。我的问题是，当我尝试在 get 方法中使用此令牌时，它不起作用，并且出现 401（未经授权）错误。

我的错误获取方法是：

我正在尝试通过本指南以 Angular 2 构建 5 分钟应用程序： https ://angular.io/docs/ts/latest/tutorial/toh-pt6.html 。

在 http 部分，我添加了一个假服务器，但我收到 404 错误，因为 angular2-in-memory-web-api.

我试图遵循这个答案：Angular2教程（英雄之旅）：找不到模块'angular2-in-memory-web-api'

但是他没有使用 angular-cli + 我不知道在哪里添加他们在那里谈论的那些依赖项。

我的 main.ts：

这是我的 package.json：

我需要做什么才能使该错误消失？

我正在尝试但无法执行 http.get 请求。

以下是Service我正在使用的相关部分。

我知道网址http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np是有效的，因为我可以在Postman中使用它运行 get 请求。

我正在使用npm-lite运行我的应用程序，它在http://localhost:3000加载

在http://localhost:3000运行会导致错误：XMLHttpRequest cannot load http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:3000 ”。

我认为问题可能是我的应用程序在 http 上运行并且需要在 https 上才能正确执行 get 请求，所以我创建了一个bs.config.json文件。npm-lite 允许我们使用browser-sync中的选项来运行。我将 https 设置为 true 以允许我的应用程序在 https 上运行。

bs-config.json

现在，当我运行我的应用程序时，它将在“ https://localhost:3000 ”上运行，我收到错误消息： zone.js:101Mixed Content: The page at ' https://localhost:3000/portfolio ' was loaded over HTTPS ，但请求了不安全的 XMLHttpRequest 端点“ http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np ”。此请求已被阻止；内容必须通过 HTTPS 提供。

我不确定如何从这里开始。请让我知道我是否正确设置了 http get 请求或者我是否误解了某些内容。谢谢！

============================================

编辑 1：响应@AngJobs 的建议：只需在您的跨浏览器请求请求中添加一个特殊标头

我在请求中添加了一个标头：

我回到了在http://localhost:3000上运行， 但现在出现错误：XMLHttpRequest cannot load https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np。预检响应无效（重定向）

在我的 angular2 应用程序中，我想在每次http请求开始时显示一个预加载器（锁定屏幕）并在请求结束后隐藏它。subscribe 方法允许我们检测请求何时成功、出现错误或完成。我认为每次在请求上调用 subscribe 方法时编写预加载器的代码是个坏主意。

1. 如何检测请求开始/结束（订阅方法除外）？
2. 将预加载器添加到每个请求的好方法是什么？

我尝试使用 angular 2（版本：2.0.0-rc.1，使用 CLI 安装）发出 http 请求并收到此错误，但我不知道问题出在哪里？

组件.ts

main.ts

包.json

谢谢你的帮助！

我按照本教程创建了一个 http 拦截器。
https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/

下面是我的代码：

下面是引导它的代码：

如果您看到 CustomHttp 的构造函数，我正在注入 EventEmitterService 的对象。但是这个对象没有被分配给类的“this”对象。因此，我无法在“拦截器”方法中使用。
我做错了什么？

我有一个提供可用语言列表的 LanguageService。此列表需要由后端请求初始化：

我想避免每次调用另一个服务时都请求后端languageService.getAvailableLangauges()。

什么是缓存必要的第一个请求的结果的好方法？