首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular2使用sse并创建可观察对象,然后求解get值,但组件没有结果

在Angular 2中使用SSE(Server-Sent Events)并创建可观察对象,然后获取值,但组件没有结果的问题可能是由于以下原因导致的:

  1. 服务器端未正确实现SSE:首先,确保服务器端正确实现了SSE,并能够向客户端发送事件流。可以使用类似Node.js的后端框架来实现SSE。
  2. 客户端代码错误:检查你的Angular 2代码,确保正确地创建了可观察对象,并订阅了事件流。以下是一个示例代码:
代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ value }}</div>
  `
})
export class ExampleComponent implements OnInit {
  value: string;

  ngOnInit() {
    const eventSource = new EventSource('/api/events'); // 替换为你的SSE端点

    Observable.fromEvent(eventSource, 'message')
      .subscribe((event: MessageEvent) => {
        this.value = event.data;
      });
  }
}

确保你的代码中使用了正确的SSE端点,并且在接收到消息时更新了组件的值。

  1. 跨域问题:如果你的SSE端点与你的Angular应用不在同一个域下,可能会遇到跨域问题。在这种情况下,你需要在服务器端设置适当的CORS(跨域资源共享)头部,以允许来自Angular应用的请求。

总结起来,要解决这个问题,你需要确保服务器端正确实现了SSE,并能够向客户端发送事件流。同时,检查你的Angular代码,确保正确地创建了可观察对象,并订阅了事件流。如果仍然存在问题,可以进一步检查是否存在跨域问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 :从 beta 到 release4.0 版本升级总结

@NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。...管理公用组件 创建SharedModule管理所有公用组件 import {NgModule} from '@angular/core'; import {CommonModule} from '@angular...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)中依赖注入,若在不同地方声明provider,则会创建不同的实例。...进行静态引导.静态方案可以生成更小,启动更快的应用,默认优先使用此处因为有些动态计算环境的代码,故编译失败,此处手动关闭。 5....解决办法:注入DomSanitizer服务可以把一个标记为可信任的,这里添加了一个叫safeUrl的pipe组件,位于app/shared/pipe/safe-url.main.pipe.ts。

8.1K00

实战 | Change Detection And Batch Update

React Virtual DOM React在更新UI的时候会根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象然后在根据特定的diff算法比较这两个对象,找出不同的部分...$apply()进行脏检测的,核心代码如下 遍历所有scope的$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。...,例如: 设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。...Vue Vue模板中每个指令/数据绑定都有一个对应的watcher对象,当数据变化时,会触发watcher重新计算更新相应的DOM。

3.2K20

Angular2:从AngularJS 1.x 中学到的经验

在《迈向Angular2》一书第4 章会详细学习组件和脏检测机制。...它们都可以使用反射机制来decorate(装饰)指定对象的行为。由于装饰器还没有标准化,也不被主流浏览器所支持,所以使用的时候需要经过中间转换步骤。...②创建对immutable/observable (不可变/可观察)数据模型友好的应用程序,从而可以做深度优化。 数据流的改变为AugularJS 1.x 基础构架带来了又一项根本性的变革。...但是,为了取得良好的结果保持API 的一致性,需要整个社区达成一致。 Angular 2 为属性提供了特殊的语法来解决这个问题,属性会在当前组件的上下文中执行,同时为传递字面量提供了不同的语法。...以上代码明确定义了一个(user)属性,这个属性将会在迭代(users)的上下文中创建。 但是,这种语法在输入的时候显得太冗长。所以,开发者可以使用以下简化语法,然后再编译成更冗长的形式: ? ?

2.7K10

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular 2组件/指令具有生命周期事件,是由@angular/core管理的。@angular/core会创建组件,渲染它,创建呈现它的后代。...ngOnChanges:当Angular设置其接收当前和上一个对象的数据绑定属性时响应。 ngOnInit:在第一个ngOnChange触发器之后,初始化组件/指令。...ngOnDestroy:在Angular销毁指令/组件之前清除。取消订阅可观察对象脱离事件处理程序,以避免内存泄漏。...这通常用在setter中,当类中的被更改完成时。 可以通过模块的任何一个组件使用订阅方法来实现事件发射的订阅。...缺点: 仅适用于HTML和CSS,其它文件类型需要前面的构建步骤 没有watch模式,必须手动完成(bin / ngc-watch.js)编译所有文件 需要维护AOT版本的bootstrap文件(使用

17.3K80

AngularJS2.0 教程系列(一)

实现一个Angular2组件 实现一个Angular2组件也很简单,定义一个类,然后给这个类添加注解: @Component({selector:"ez-app"}) @View({template:"...@Component最重要的作用是通过selector属性(为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。 3....渲染组件到DOM 将组件渲染到DOM上,需要使用自举/bootstrap函数: bootstrap(EzApp); 这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。...以组件为核心 在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立在DOM之上的。...而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2

2.4K10

Change Detection And Batch Update

React在更新UI的时候会根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象然后在根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...$apply()进行脏检测的,核心代码如下 遍历所有scope的$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2的更新没有副作用...设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。

3.3K40

Change Detection And Batch Update

React在更新UI的时候会根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象然后在根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...$apply()进行脏检测的,核心代码如下 ? 遍历所有scope的$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2的更新没有副作用...设置了变化检测策略为OnPush的组件不走深度遍历,而是直接比较对象的引用来决定是否更新UI。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。

3.7K70

前端代码常见的 Provider 究竟是什么

Angular2 中提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...工厂方法模式是用于创建不同的产品,通过继承的方式。 但有的时候创建对象可能有别的来源,比如从别的地方获取的一个,或者已经创建好的对象。这时候来源就不只有工厂了。...context 中,然后组件取出来用,也是通过 provider 的方式。...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是在容器内的对象,可以声明依赖对象然后用到的时候会自动注入。...我们知道,provider 并不关心具体对象是怎么创建的,可以动态切换多种创建策略,而 angular2 就提供了 4种策略:Class、Factory、Value、Exsiting 直接: @NgModule

94210

前端代码常见的 Provider 究竟是什么

Angular2 中提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...工厂方法模式是用于创建不同的产品,通过继承的方式。 但有的时候创建对象可能有别的来源,比如从别的地方获取的一个,或者已经创建好的对象。这时候来源就不只有工厂了。...context 中,然后组件取出来用,也是通过 provider 的方式。...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是在容器内的对象,可以声明依赖对象然后用到的时候会自动注入。...我们知道,provider 并不关心具体对象是怎么创建的,可以动态切换多种创建策略,而 angular2 就提供了 4种策略:Class、Factory、Value、Exsiting 直接: @NgModule

1.4K30

Angular2 VS Angular4 深度对比:特性、性能

这个Angular版本更加注重于开发移动应用程序,开发人员可以使用创建跨平台的应用程序,在解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。...它由Traceur编译器(结合ES6)进行处理,然后生成ES5代码,使用TypeScript语法创建运行时类型断言。...通过在DI库中提供基本信息(可以调用函数或创建类的实例来检查相关元数据),从而简化了对象实例的构建。通过提供注入注释,使得参数信息重写也变得简单。...指令: Angular2提供了三种指令:  组件指令:通过将逻辑封装在HTML,CSS和JavaScript中,从而使得组件复用。...更小更快: 使用Angular4,程序将会消耗更少的空间,比以前的版本运行地更快。工作主要用于不断进行改进。 视图引擎: Angular4的开发人员修改了视图引擎的代码,例如AOT创建的代码。

8.7K20

程序员如果都懂SpringWebFlux框架的话,也不用天天CRUD了

首 先 通 过WebClient.create方法创建一个WebClient实例,然后通过get、post等方法选择适当的客户端调用方式,uri用来指定需要请求的路径,retrieve用来发起请求获得响应...,bodyToMono(String.class)用来指定请求结果需要处理为String、包装为Reactor的Mono对象,代码如下所示: 除 了 通 过 create 方 法 构 建 WebClient..., 也 以 通 过WebClient.builder方法创建WebClient.Builder对象。...SSE也是WebSocket的一个轻量级的替代方案,虽然功能较弱,优势在于,SSE在已有的HTTP上可以使用简单易懂的文本格式来表示传输的数据。...我 们 以 使 用ServerSentEvent.Builder类来创建ServerSentEvent对象。这里我们指定了事件的名称random,以及每个事件的标识符和数据。

2K20

服务器端实时推送技术之SSE

一个标准的 HTTP 请求- 响应,需要客户端打开一个连接,将一个 HTTP 请求(如 HTTP GET 请求)发送到服务端,然后接收到 HTTP 回来的响应,如果该响应被完全发送或者接收,服务端就会把连接关闭...如果服务端没有新的数据,就发送适当的指示关闭连接。...Long-polling:长轮询,客户端发送一个请求到服务端,如果服务端没有新的数据,就保持住这个连接直到有数据。一旦服务端有了数据(消息)给客户端,它就使用这个连接发送数据给客户端。...与 WebSocket 相比,SSE 有一些显著的优势。我认为它最大的优势就是便利:不需要添加任何新组件,用任何你习惯的后端语言和框架就能继续使用。...clientId=111接口,可以请求多次,观察第1步的浏览器返回结果; * 3.请求http://localhost:8888/sse/end?

3.4K21

前端三大框架vue,angular,react大杂烩

函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。    使用ng-model时,你可以使用双向数据绑定。    使用$scope....在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用来更新模型数据。 1.2、双向绑定的三个重要方法: $scope.$apply() $scope....,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会调用相应的处理方法来实现双向绑定   ...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

3K90

前端三大框架vue,angular,react大杂烩

函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。    使用ng-model时,你可以使用双向数据绑定。    使用$scope....在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用来更新模型数据。 1.2、双向绑定的三个重要方法: $scope.$apply() $scope....,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会调用相应的处理方法来实现双向绑定   ...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

2.1K60

vue.js与其他前端框架的对比

当有变化产生时,一个新的Virtual DOM对象会被创建计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节上对标准有更好的支持。...Angular2组件有shadow dom的实现可以选择,而Vue目前还没有。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐的唯一标准(当然,对视图是否需要测试还有待探讨)。...除此以外,Angular2还有一些小功能比如检验模板的类型安全(即,模板里能在编译器保证没有引用model未定义的变量),不过AoT本身似乎还没有稳定,所以不能算优势。

4.1K80

前端三大框架大杂烩

在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用来更新模型数据。...,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会调用相应的处理方法来实现双向绑定   ...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得更清晰。...一个组件就是通过这两个属性的在 render 方法里面生成这个组件对应的 HTML 结构。

2.6K50

Angular2学习记录-给后端程序员的经验分享

isBackColor控制结果 */ isAddBackColor(){ if (this.getIsIndex()){ //监听事件使用箭头函数,这样ng2才会管理该变量...queryParamMap.subscribe(),路由参数更新时自动通知 3.5组件通信 父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges或则setter监听变化...任意组件:使用service通讯(要求service单例),service提供Observable的next发布,其他组件引用service对象subscribe该发布,那么就实现了信息的流动,并且是在只要订阅了该发布的组件中都能获取...很简单在根module中提供服务且其他组件不要自己providers该服务. 3.7组件生命周期 组件生命周期看下面这张图.图中没有onChanges(changes: SimpleChanges)方法的调用...(使用formData对象,调用其append方法添加文件,再使用angular2的http组件post上去)uploadAvatar(file: any): Promise{ let

3.1K20

非线性回归nls探索分析河流阶段性流量数据和评级曲线、流量预测可视化

许多不同的方法可用于求解额定曲线参数。我们使用非线性最小二乘回归来最小化评级曲线参数的残差平方和 (SSE)。残差 SSE 计算如下: 其中:X 是测量值,Y 是预测。...非线性优化方法搜索参数组合以最小化目标函数(在这种情况下为残差 SSE)。彼得森 应用 Nelder-Mead 算法求解琼斯公式。扎关 使用广义减少梯度和遗传算法提出非线性优化方法。...## 为了将测量深度与IQ的流速测量结合起来 ## ##我们需要插测量深度到每分钟,因为深度是偏移。然后我们就可以连接这些数据。我们将使用线性插。...站点 16397 探索性分析表明,在该站点使用幂函数(公式 (1)")) 因为在水文过程图中没有观察到不稳定的流动条件。评级曲线预测导致 NSE 大于 0.95,表明非常适合(表 2)。...低流量下观测和预测之间的巨大差异归因于具有极快的水流高度变化(\> 1.5 英尺/小时)的事件,参数估计难以拟合(图 5 )。其余评级曲线的拟合优度指标有所下降,仍表明性能良好(表 4)。

1.4K10

angular5面试题_大数据面试题

AOT编译器将HTML和模板添加到JS文件中,然后再在浏览器中运行。 因此,没有多余的HTML文件可读取,从而为应用程序提供了更好的安全性。...脏检测的基本原理是存储旧数值,并在进行检测时,把当前时刻的新和旧比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2中有了Zone.js。...可以采用如下方式避免 对于只用于展示的数据,使用单向绑定,而不是双向绑定; Angular的数据流是自顶而下,从父组件到子组件单向流动。单向数据流向保证了高效、预测的变化检测。...-- 3.绑定方法调用的结果 --> 直接绑定: 大多数情况下,这都是性能最好的方式。 绑定方法调用的结果:在每个脏检测过程中,classes方程都要被调用一遍。...如果没有特殊需求,应尽量避免这种使用方式。 pipe方式: 它和绑定function类似,每次脏检测classPipe都会被调用。

4.3K20
领券