首页
学习
活动
专区
工具
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取得页面元素可能不是最新AngularChange 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.6K50

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

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

    3.1K40

    Angular12个经典问题,看看你能答对几个?(文末附带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.3K80

    使用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页面: 首先跳转回angularlogin-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.1K10

    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.1K30

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

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

    2.3K80
    领券