问题标签 [angular2-services]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
2065 浏览

json - Angular2 HTTP Providers,从 JSON 获取 Amcharts 的字符串

这是一个略显凌乱的问题。虽然看起来我在问有关 amCharts 的问题,但我真的只是想弄清楚如何从 HTTP 请求中提取一个数组,然后将其转换为一个变量并将其放入 3 方 javacript。

一切从这里开始,这个问题得到了 AmCharts 支持的友好回答。

plnker可以看出。图表正在工作。图表的数据是硬编码的:

所以我们知道 amCharts 部分有效。知道问题出在哪里将硬编码数据更改为 json 请求,以便它可以是动态的。我不认为这应该是非常困难的,但对于我的生活,我似乎无法弄清楚。

第一个问题是我在 .map、.subscribe 或 .observable 上找不到任何文档。

所以这是一个看起来与第一个非常相似的plunker,但是它有一个 http 提供程序和可注入的。它坏了,因为我不知道如何从服务中提取数据并将其放入 AmCharts 函数中。我知道如何从 http 提供程序中提取数据并使用 NgFor 在模板中显示它,但我不需要在模板(视图)中使用它。如您所见,我使用 getTitle() 函数成功地从服务传输数据。

所以最终的问题是为什么我不能使用服务来获取数据,将数据转换为变量并将其放入图表中。我怀疑 options.json 中可能有一些线索,因为 json 格式可能不正确?我是否声明了正确的变量?最后,它可能与observable / map有关?

0 投票
1 回答
1036 浏览

javascript - 在 es5 中创建一个 Angular 2 服务

我试图在 Angular 2 中创建自定义服务,但我似乎在 es5 中找不到任何关于 Angular 2 服务的文档(这是我编写代码的内容)我尝试过使用它

但是,当我将它注入到我的组件中时,它会引发错误,no provider for class0 (class10 -> class0)我似乎无法弄清楚如何创建自定义服务。有谁知道如何在 es5 中做到这一点?

0 投票
1 回答
115 浏览

angularjs - 如何向 Firebase 发送多个值

我一直在使用https://github.com/rolandjitsu/ng2-lab进行实验。

我的问题是我想在我的服务中看到每件衬衫的name和,但是当我尝试打电话时amount

add(name: string, amount: string)在服务中

或者

add() { this.shirts.add(this.form.name, this.form.amount);在组件中

我收到这样的错误:

如果我像这样添加名称,它会起作用:add(name: string)但我希望能够添加整个架构而不仅仅是名称值。

我意识到我可能在做一些非常基本的错误,但我认为我无法向add()函数添加 2 个参数,但我不知道如何添加所有数据。

服务/衬衫.ts

衬衫组件

ShirtComponent.html 表单

编辑:

这就是 firebase_array.ts 中的 add() 函数的样子,也许它是我所缺少的一部分?

0 投票
1 回答
4197 浏览

angularjs - 使用Angular 2获取数组中每个项目的总值

我有一系列衬衫,每件衬衫都有一个价格,我想使用 Angular 2 获得所有衬衫的总价格。

这是我的数据的样子:

然后我想将成本加在一起并显示在我的组件中这大致是我到目前为止所要做的:

麻烦的是,console.log(shirt)这里没有返回任何内容,即使返回,我也不确定如何将新shirt项目添加在一起。这个问题的另一个要素是我应该在组件上还是在服务中这样做?

编辑: 我做了以下更改,但我得到了0,我应该得到40

html:

更新的衬衫组件:

0 投票
1 回答
433 浏览

ajax - Node.js + Angular 2 RxJS Observabes & Change Detection - 将 Ajax 服务与 REST API 结合使用的最佳方式?

我对 Angular 2 很陌生,对 RxJS 或 observables 的性质知之甚少。但是,我正在尝试实现某些功能,并且只是在寻找正确信息的指南,我应该学习以实现这一目标和更全面的知识。

我正在开发一个基本的 Web 应用程序,它更像是一个测试,其中我的几个 Angular 2 路由视图需要从我在 Node.js 中构建的 REST API 端点异步获取数据。

这是我想要实现的目标:

当我(使用 Angular)路由到site.com/messages那里时,将会有一个视图,其组件将使用通过父组件的 providers 数组拉入的服务。我需要这项服务来不断地从 API 端点获取数据site.com/api/messages

在我看来,最直观的方法是让需要数据的组件在组件初始化时打开(http.get()生命周期挂钩)。这将反复轮询我需要的端点,以便它获取视图的数据,该视图可以使用结构指令来迭代它或类似的东西。setInterval()ngOnInit

这个问题是我觉得这是处理获取数据的一种非常原始的方式。我想使用最新、最有效和最有效的方法来做到这一点。不幸的是,我对 Angular 2 很陌生,对它背后的一些技术和实践不是很熟悉。我听说过并看过 RxJS 可观察对象、Angular 变化检测、RxJS 可观察流,我想知道学习这些的最佳方法是什么,以及他们究竟会给我带来什么,就使用 Angular 2 服务获取异步数据而言。任何关于如何利用这些技术以及它们如何组合在一起的信息都会很棒。谢谢

0 投票
3 回答
4605 浏览

typescript - 如何在Angular 2(Ionic 2 / Angular 2 / Typescript)中的服务中注入服务时传递依赖项参数

我正在制作一个示例应用程序,以在 typescript 中连接到 ionic 2 中的 websocket 服务器。链接到回购

我的要求是在应用程序启动期间建立 websocket 连接

我正在使用angular2-websocket来创建连接。

参考 :

  1. http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

  2. http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

我收到错误消息“无法解析 '$WebSocket'(String, Array, ?) 的所有参数。确保所有参数都用 Inject 修饰或具有有效的类型注释,并且 '$WebSocket' 用 Injectable 修饰。 "

代码: app.ts

连接服务.ts

0 投票
1 回答
604 浏览

angular - 如何使用 Observables 在 Angular2 中的返回数据中保留纯文本格式

我有一个工作 Observable需要返回格式化的纯文本(不是 JSON)。当我在浏览器中拉出端点时,格式化的纯文本会正确显示。是否可以将开关添加到我的 Angular2 服务中以显示原始空格和换行符。

示例:来自我的http.service.ts文件:

我很抱歉这个例子不是一个有效的例子。我编造了.PreservePlainTextForrmating()来描述我要在代码中完成的工作。

提前感谢您的帮助。

0 投票
1 回答
4764 浏览

javascript - 用于导出依赖项的 Angular 2 多提供程序

我即将使用多提供程序来导出我的依赖项的依赖项及其自身,因此它们可以立即注入到组件中。

对于一个组件

以下_

将导致

没有 Http 提供者!(应用程序-> Foo-> Http)

会正常工作,而我希望他们能做类似的工作。

在这种情况下,多提供者是否有适当的用途?

0 投票
1 回答
1250 浏览

javascript - 通过事件发射器进行 Angular 2 更改检测会消耗大量 CPU 时间

我注意到我的 Angular 2 应用程序在使用一段时间后变得非常缓慢。

我分析了 CPU 时间,发现正在进行大量的更改检测执行。

页面加载后的 CPU 配置文件...

页面加载后的 CPU 配置文件

...与使用该页面一段时间后的 CPU 配置文件相比。

使用页面一段时间后的 CPU 配置文件

我使用了很多EventEmitter不同的服务来在很多组件之间进行通信。

经过一段时间的测试,似乎窗口滚动事件的发射器造成了很大一部分重负载。

使用页面一段时间后没有发出滚动事件的 CPU 配置文件:

不发出滚动事件的 CPU 配置文件

这里服务的实现:

问题

  1. 如何调试更改检测调用以查看它们应用于何处?
  2. 还有什么会导致如此多的变更检测调用?
  3. 如果我用EventEmitter错了,我该如何正确使用它?

编辑 1

另外我发布了网格树组件,因为更改可能是由我的组件构建的递归树结构引起的。

生成的层次结构网格:

层次网格

0 投票
0 回答
1995 浏览

angular - 角度 2:当通过服务“this”解决组件中的承诺时是“窗口”

我正在关注 Angular 2 的快速入门教程(https://angular.io/docs/ts/latest/tutorial/toh-pt4.html#!#review-the-app-structure),但我被困在了服务中章节。这是我的组件:

如您所见,它 implements OnInit,它执行组件的getHeroes方法,然后调用注入的方法HeroService

承诺成功解决,我从hero.mock.ts响应变量中获取数组:

我面临的问题是第一个this( this._heroService) 正确设置为MainComponent,但第二个 ( this.heroes) 正在引用Windowjavascript 对象。我已经检查了其他几个答案,包括这个并按照他们的建议完成了,但问题仍然存在。谁能想到发生这种情况的原因?

编辑:为 MainComponent#getHeroes 生成的 javascript

另一个编辑: 如果我将调用服务的方法更改为此(注意在 之后包含所有内容的大括号=>),那么this is MainComponent,但标题和heroes数组中的更改都不会反映在视图中: