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

如何在POST后刷新angular 6上的observable

在Angular 6中,可以通过以下步骤在POST请求后刷新Observable:

  1. 首先,确保你已经导入了HttpClient模块,它是Angular中用于发送HTTP请求的模块。
  2. 在你的组件中,创建一个名为data的Observable对象,并使用HttpClient发送POST请求。例如:
代码语言:typescript
复制
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  // 组件的其他配置
})
export class YourComponent implements OnInit {
  data: Observable<any>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.refreshData();
  }

  refreshData() {
    this.data = this.http.post<any>('your-api-url', { /* POST请求的数据 */ });
  }
}
  1. 在模板中,使用async管道来订阅并显示Observable的值。例如:
代码语言:html
复制
<div *ngIf="data | async as result">
  <!-- 显示result的值 -->
</div>

这样,当refreshData()方法被调用时,它会发送一个POST请求,并将返回的数据赋值给data Observable。模板中的async管道会自动订阅data Observable,并在数据更新时刷新视图。

请注意,以上代码只是一个示例,你需要根据你的实际需求进行适当的修改。此外,如果你需要在POST请求之前或之后执行其他操作,你可以使用pipe操作符来链式调用其他操作符,例如mapcatchError等。

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

相关·内容

  • 反思录:Angular实现svg和png图片下载

    适用范围 svg被主流浏览器和svg阅读器支持,canvas只有主流浏览器支持; svg适用于大面积渲染区域的程序和静态文档,如google地图。canvas适合小范围图像密集型场景,如游戏。...接下来要解决的就是如何在component中引用页面上的svg元素并将它转化成png格式的图片。 svg和png图片转换和下载 1....解决@ViewChild未及时刷新问题 @ViewChild取得页面元素可能不是最新的,Angular的Change detection需要时间完成刷新,所以有很短时间的延迟[2]。...永远从问题最近的地方开始分析 不要用战术上的勤奋掩饰战略上的懒惰 我个人对Angular并不十分熟悉,在实现svg和png图片下载功能的过程中遇到一些坑,这些坑有深有浅,深的直接面向stackoverflow...然而这一步其实完全没必要,原因在于这些变量都是编辑器辅助补全的。 紧接着,我在toBlob方法插入了console.log(this.sanitizer),运行后打印的结果是undefined。

    2.7K40

    使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

    我的前端应用流程是: 访问前端地址, 如果没有登录用户, 那么跳转到Authorization Server进行登陆, 同意后, 返回到前端的网站. ...如果前端网站有登录的用户, 那么在用户快过期的时候自动刷新token. 以免登陆过期..... redirect_url是登陆成功后跳转回来的地址. silent_redirect_uri是自动刷新token的回掉地址. automaticSilentRenew为true是启用自动安静刷新token...您可以单独建立一个简单的页面就像官方文档那样, 然后再跳转到angular5项目里面. 这个页面一闪而过: ? 回到angular5项目后就可以正常访问api了....自动刷新Token: oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新的时候, 它好像是会在页面上弄一个iframe, 然后在iframe里面操作.

    5.7K50

    【Appetite】ionic3实录(五)基本服务实现

    ,装了插件后,src目录右键会出现Ionic Generate的快捷菜单,点击后弹出选择界面,输入名称即可自动创建。...get、post方法。...因为目前大多插件的异步使用Promise,Observable转Promise比较简单,而Promise转Observable比较麻烦,为了更方便集成,所以把官方推荐的Observable方式转成Promise...注意catch里面用了return,表示捕获了异常处理并返回,下次链式调用将进入then,这样每个调用网络请求后的逻辑操作可以全放在then里,省掉写catch的部分。...这些服务会随着业务功能的开发而补充,服务的每个方法可以不写返回类型(如fun: Promise里的 Promise),但为了肉眼快速分辨出是异步方法还是普通方法?

    3.1K40

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

    ngAfterViewInit:Angular创建组件的视图后。 ngAfterViewChecked:在Angular检查组件视图的绑定之后。 2. ...它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...v=bci-Z6nURgE 6.  什么是延迟加载?如何在Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。...Observable提供像map,forEach,reduce之类的类似于数组的运算符,还有强大的运算符,如retry()或replay()等,使用起来是相当方便的。...其中,反应最为迅速的就是Wijmo,Wijmo 在 Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。

    17.4K80

    使用angular4和asp.net core 2 web api做个练习项目(三)

    Server 4的登录页面, 所以angular项目里面无需登录页面, 把login相关的文件删除.............., authorization server的地址是 http://localhost:5000, 登陆成功后跳转后来的地址是: http://localhost:4200/login-callback..., 都会在登录用户变化时(登录/退出)触发component里面自定义的事件. logout()是退出, 调用方法后也会跳转到authorization server的页面....然后输入用户名密码登陆. 3.同意授权 点击yes 同意授权. 4.跳转回angular页面: 首先跳转回的是angular的login-callback路由, 然后瞬间回到了主页: 5....刷新, 还是可以取得到登录的用户. 但是如果再打开一个浏览器实例就无法取得到登陆用户了, oidc应该是把登陆信息存到了session storage里面.

    1.3K80

    Angular 从入坑到挖坑 - HTTP 请求概览

    services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } } 4.1.2、从服务端获取数据 这里使用到的后端接口是掘金上一位朋友开发的毒鸡汤接口...,可以使用 post 方式调用 https://api.tryto.cn/djt/submit 进行毒鸡汤的提交 ?...4.2.2、请求重试 某些情况下存在因为特殊原因导致短时间的请求失败,这时可以在 pipe 管道中,当请求失败后,使用 retry 方法进行多次的请求重试,在进行了多次重试后还是无法进行数据通信后,则进行错误捕获...当我们需要对请求进行修改时,例如在请求的 header 中添加上 token 信息,此时我们需要先克隆一个原始的请求对象,在这个克隆后的请求上进行操作,最终将这个克隆后的请求传递给下一个拦截器 import...克隆后的请求信息:${JSON.stringify(authReq.headers)}`); // 将克隆后的 http 请求信息传递给下一个拦截器 return next.handle

    5.3K10

    一文带你进入微前端世界

    浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 UI 不同步,DOM 结构不共享。...在应用卸载后,同步卸载页面上对应的link和style即可 JavaScript 隔离 每当微应用的 JavaScript 被加载并运行时,它的核心实际上是对全局对象 Window 的修改以及一些全局事件的改变...,例如 jQuery 这个 js 运行后,会在 Window 上挂载一个 window.$ 对象,对于其他库 React,Vue 也不例外。...通常在 Node.js 端可以采用 vm 模块,而对于浏览器,则需要结合 with 关键字和 window.Proxy 对象来实现浏览器端的沙箱 微前端的消息通信 微前端通常不会限制应用采用的框架,如何在不同的应用...: https://juejin.cn/post/6844904162509979662 [6]微前端在解决什么问题?

    1.3K10

    Angular进阶教程2-

    如果你在组件中\color{#0abb3c}{组件中}组件中的元数据\color{#0abb3c}{元数据}元数据上定义了providers,那么angular会根据providers为这个组件创建一个注入器...// 这种方式注册,会注册到每个组件实例自己的注入器上。..._http.get(url, { params: { code, name } }); } 复制代码 发送数据到服务器 HttpClient.post() public postHttpResult..._http.post(url, body); } 复制代码 错误处理 在调用接口的时候,当遇到接口请求失败或者报错的时候,前端需要做一些错误的提示信息展示,具体操作如下: this....RxJS中的核心概念(Observable 、Observer 、Subscription、Subject) 在Angular项目中我们在调用接口的时候,常用的调用方式是: this.

    4.2K30

    响应式脑电波 — 如何使用 RxJS、Angular、Web 蓝牙以及脑电波头戴设备来让我们的大脑做一些更酷的事

    脑电波 ( Electroencephalography,简称 EEG ) 本质上是监控脑电活动的一种方式。它通常需要在头皮上放置几个电极,然后收集关于神经元发射的信息,最后将信息记录在图表上。...虽然它能够教会你如何平静下来,但对我来说,只有弄清楚如何在网页上消费这些数据后,我才能平静下来!...关于眨眼 脑电波所做的众多事情之一便是测量头皮上不同位置的电势 (电压)。测量的信号是大脑活动的副作用,可用于检测一般心理状态 (如浓度水平、突发刺激的检测,等等)。...使用 Web 蓝牙与 Muse 头戴设备配对 接下来我们需要订阅 muse.eegReadings observable 上的脑电波数据 (这段代码放到上面的 TODO 注释处): ?...现在我们可以使用 leftBlinks observable 来对眨眼进行可视化!可以使用 async pipe 将它绑定到 Angular 模板中: ?

    2.3K80
    领券