如何在POST后刷新angular 6上的observable
在Angular 6中，可以通过以下步骤在POST请求后刷新Observable：
- 首先，确保你已经导入了
HttpClient模块，它是Angular中用于发送HTTP请求的模块。 - 在你的组件中，创建一个名为
data的Observable对象，并使用HttpClient发送POST请求。例如：
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请求的数据 */ });
}
}- 在模板中，使用
async管道来订阅并显示Observable的值。例如：
<div *ngIf="data | async as result">
<!-- 显示result的值 -->
</div>这样，当refreshData()方法被调用时，它会发送一个POST请求，并将返回的数据赋值给data Observable。模板中的async管道会自动订阅data Observable，并在数据更新时刷新视图。
请注意，以上代码只是一个示例，你需要根据你的实际需求进行适当的修改。此外，如果你需要在POST请求之前或之后执行其他操作，你可以使用pipe操作符来链式调用其他操作符，例如map、catchError等。
相关·内容
我一直在学习角4，直到我尝试在服务中实现捕获处理，一切都进行得很顺利。我试图使用"rxjs“捕获和抛出，但是我的控制台中有一个未定义的函数错误。
import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observab
浏览 6提问于2017-08-02得票数 43
回答已采纳
1回答
Am正在开发一个Ionic应用程序，它将d与wordpress集成在一起，并使用REST (JSON)提取数据。
下面的代码在我的一个.ts文件中，它完美地执行无限滚动
doInfinite(infiniteScroll) {
let page = (Math.ceil(this.posts.length/10)) + 1;
let loading = true;
this.wordpressService.getRecentPosts(this.categoryId, page)
.subscribe(data => {
for(let p
浏览 2提问于2018-02-07得票数 2
当我的EventEmitter发出一个事件时，我的角度SPA不会刷新。
下面是子组件中的EventEmitter：
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Todo } from '../todo';
@Component({
selector: 'app-add-todo',
templateUrl: './add-todo.component.html',
styleUrls: ['
浏览 2提问于2018-10-15得票数 2
回答已采纳
2回答
我使用JWT进行身份验证(没有登录页面)。我有一些问题，当站点加载时，首先是get方法，用于加载内容，然后是身份验证方法，并将令牌保存在本地存储中。
问题是我得到的错误，我没有通过身份验证，并在我刷新页面后，它的工作。我需要让他首先创建身份验证方法，并将其保存到本地存储中，然后加载页面。
Auth.service：
import { Injectable } from '@angular/core';
import { HttpService } from '../http/http.service';
import * as jwt_decode from &
浏览 0提问于2019-11-10得票数 1
我正在构建一个示例应用程序，其中我正在做一个post api调用。其主要目标是使用POST api调用发送查询，该调用作为响应提供来自api的数据。这个api的主要特性是每隔1分钟(连续)提供更新的数据。
problem ：主要问题是api显示特定时间实例的更新数据(例如: 16:30 PM)，但是要在一两分钟后查看更新的数据(例如: 16:32 PM)，我必须每次刷新页面。我试图解决这个问题，使用Web在特定时间间隔后继续调用api，并更新前端的数据，但不知怎么的，它不起作用。
请找到下面的代码供您参考.
import { HttpClient } from '@angular/c
浏览 3提问于2021-03-31得票数 0
2回答
在我的View上显示数据时遇到问题，无法显示在我的数组上迭代的对象。在我的控制台上显示所有没有错误的对象，但是我不能使用ngFor显示
posts.coomponent.ts
import { Component, OnInit } from '@angular/core';
import {Pipe, PipeTransform} from '@angular/core';
import {PostService} from '../posts.service';
import {Post} from '../posts';
浏览 0提问于2017-03-18得票数 1
1回答
场景：I有一个名为list的组件，它显示列表中的所有customers。在这个列表中，我写了这样的条件：
1)默认情况下，将选择第一个list-item(Ex customer 1)，并将所选的list-item(Ex customer 1)发送到另一个名为display的组件。
2)然后单击任何list-item(i,e customer)，所选的列表项也会发出display组件。如下图所示：
联系人列表组件代码：
<mat-selection-list>
<mat-list-option [ngClass]="{selected : curr
浏览 0提问于2019-04-01得票数 0
当我使用post时，没有错误，但是post方法不工作this.http.post。(它昨天起作用了，但今天不起作用。)不知道)有我的服务：
import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {GetData} from './data';
impo
浏览 0提问于2018-03-10得票数 1
回答已采纳
我尝试使用刷新令牌进行登录，但是当访问令牌过期时，不要刷新令牌。我使用djangorestframework-simplejwt实现jwt，使用angular 9实现rxjs。当尝试刷新后端时，返回如下内容
{访问："asdsadlsadlsakdslañdksañldsakdsa“
}
但是它与rxjs不兼容。
refreshAccessToken() {
return this.http.post<any>(something http )this.getRefreshToken() }, this.httpOptions).pipe(
map(
浏览 0提问于2020-07-15得票数 1
我有一个从服务器获取“帖子”的服务，然后显示在我的应用程序的“主页”组件上。我也有一个关于家庭组件的表单和帖子可以删除。我希望在创建新的帖子(使用表单)或删除帖子后立即更新组件。目前，Post/Delete确实有效，但我必须刷新页面才能显示更改。
我试过在post/delete后使用"GET“，但仍然不起作用。我假设在执行GET代码行之前没有时间删除/发布数据。我还尝试创建了一个拦截器并拦截每个HTTP请求，但似乎也不起作用。对我应该调查的内容有什么建议。我对Angular (以及一般的web开发)还是个新手。
api.service.ts
@Injectable({
浏览 8提问于2019-07-09得票数 0
回答已采纳
我们在同一台开发机器上的不同端口上有一个Angular前端和一个web服务。web服务被配置为允许从本地主机和托管Angular应用程序的端口进行访问。
我们使用JWT身份验证，它适用于针对web服务的初始身份验证。我们接收一个身份验证令牌并将其存储在Angular本地存储中，并将一个刷新令牌存储为设置了HttpOnly的cookie。目前，我们所处的开发环境中，客户端或web服务上都没有启用SSL。
当我们的auth令牌过期时，问题就来了。我们的应用程序发送一个更新令牌的请求，但该请求没有刷新令牌cookie。
我们已经尝试在Angular中设置一个代理，将来自Angular域的API请求转
浏览 0提问于2021-01-15得票数 1
为什么当刷新页面时身份验证不起作用？当用户登录时。刷新页面后，用户将被注销。
auth/auth.service.ts：
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {User} from './user';
import {Http, Headers,
浏览 0提问于2018-01-29得票数 1
所以我用angular和typescript做这个项目，在那里我从API获得用户列表，然后简单地添加新用户。我不知道如何检查给定名称的用户是否存在于我的API中，如果存在则禁用保存。我尝试使用find()，但我得到的错误是'find‘在该类型上不存在。 以下是我的.ts文件片段： export class AddClientComponent implements OnInit {
client = {
name: '',
number: '',
description: ''
};
submitt
浏览 9提问于2021-07-08得票数 0
回答已采纳
在用于http get和post的angular 5.2.x中，我有这样的代码：
post(url: string, model: any): Observable<boolean> {
return this.http.post(url, model)
.map(response => response)
.do(data => console.log(url + ': ' + JSON.stringify(data)))
.catch(err => this.handleError(err));
}
get(url: stri
浏览 4提问于2018-05-06得票数 30
回答已采纳
4回答
myService.ts
import { Injectable } from '@angular/core';
import { Http, Response,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/Rx';
import{Router} from'@angular/router';
import 'rxjs/add/operator
浏览 1提问于2018-12-19得票数 10
回答已采纳
我有一个显示票证信息的表，用户可以添加新的票证并将其发送到后端。问题是表不会使用用户添加的新票证进行更新，而其他用户和用户本身必须始终刷新页面才能显示
如何在插入新票证时强制更新可观察对象？
下面是代码。对于ADD组件
import { Component, OnInit } from '@angular/core';
import { AddService } from '../../services/add.service';
import { Client, Product, ListTracker } from '../../list';
浏览 2提问于2018-07-23得票数 0
我希望使用全局错误处理程序来处理到期的访问令牌，并使用刷新令牌刷新它们。我的解决方案，几乎似乎是可行的如下：
rom您的组件，订阅一个可观察的，如下所示：
this.myHttpService.getSomeData().subscribe(response => {
console.log('user logged in', response );
},
error => {
// optionally do something custom here.
consol
浏览 3提问于2017-10-17得票数 1
回答已采纳
如何初始化angular服务类中对象和数组对象中的对象？我希望在我的表单中使用双向绑定，因此我希望将变量从服务类传递到Html模板。 trainer.service.ts import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Trainner } from '../trainner.model';
import { Observable } from 'rx
浏览 45提问于2019-09-16得票数 2
回答已采纳
我使用列出用户选择的语言的内容。他们还可以使用对话框面板添加新的语言。在他们添加了一种语言并返回之后。我希望刷新我的数据源以显示他们所做的更改。
我通过从服务获取用户数据并在刷新方法中将其传递到数据源来初始化数据存储。
Language.component.ts
import { Component, OnInit } from '@angular/core';
import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';
import { LanguageAd
浏览 470提问于2017-10-15得票数 176
回答已采纳
我正在尝试在我的angular应用程序中检查特定的响应头。如果用户尝试访问需要有效JWT的路由，并且JWT已过期，则来自后端ASP.NET核心服务器的响应头具有token-expired: true。我想在将用户发送到刷新路由之前检查该值。 我尝试了以下操作来查看整个响应头，但没有成功： `public fetchPosts(): Observable<HttpResponse<Object>> {
var b = this.http.get<HttpResponse<Object>>('api/v1/posts',
浏览 11提问于2019-03-18得票数 0
回答已采纳
在将角5更新为角6后，我遇到了一些关于rxjs6的问题：
TypeError: this.http.post(...).map is not a function
error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
TypeError: rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable.of is not a function
我尝试过一些方法，比如：
将此导入添加到service.ts
从‘rxjs/操作符’
浏览 1提问于2018-05-30得票数 4
回答已采纳
我刚接触Angular，所以这个问题在某种程度上可能看起来微不足道。
我想导入一个外部文件，所以我需要使用文件选择器创建表单，然后将包含此文件的POST作为多部分文件发送到某个端点。
我使用的是，根据提供的示例，我可以使用带有实现的组件发送带有文件数据的帖子。我知道这个ngx-uploader是根据发出的事件发出POST请求的。如何处理来自此POST的响应？在常规请求的情况下，我可以订阅任何返回Observable的Http服务方法，但是我不知道如何在使用这个Uploader时读取此响应？
浏览 0提问于2017-11-03得票数 0
每次更新时，使用简单的get方法从MySql获取数据在浏览器URL上都能很好地工作。在添加了一些新行之后，使用subscribe和observable获取新数据即使在控制台上也不起作用。它返回旧的数据集。如果我调用php脚本，它会给我当前添加的行，但在视图中它不会更新。 基本上，我的代码来自本教程：https://www.techiediaries.com/php-angular-crud-api-httpclient-forms/。我可以毫无问题地添加和删除数据。在某些浏览器(或多或少所有浏览器)上阅读它似乎很困难。只有在Edge上它才能工作，并在页面刷新后更新数据。 这是我的服务： im
浏览 25提问于2019-07-04得票数 0
回答已采纳
1回答
我们有一个用Ionic2编写的应用程序，直到一周前，应用程序运行良好，直到我们更新到新版本的Ionic (Beta 11)。
我正在使用Observable和map进行http调用，但是没有触发所有的http get。
这是我为http调用使用的代码：
public getNavigation(target: string): Observable<Navigation> {
console.log(target);
return this.http.get(`data/${target}.json`)
.map(response => r
浏览 4提问于2016-08-22得票数 0
回答已采纳
我在我的angular 2应用程序中实现了刷新令牌，下面是我的代码。我的刷新令牌post调用没有被调用。为了定位问题，我在调用刷新令牌的post时也没有看到任何错误。感谢您的帮助
refreshToken(): Observable<any> {
console.log("refreshing token");
let body: string = 'grant_type=refresh_token&refresh_token=' + localStorage.getItem("refresh_tok
浏览 2提问于2016-11-01得票数 1
2回答
嗨，我是Angular的新手，我一直在努力学习Angular 2，所以要温柔点:)。我一直在尝试使用WordPress作为我的数据应用程序接口使用WP插件。到目前为止，已经能够从WordPress上获得帖子。下面是我的数据服务代码。
import {Injectable} from "angular2/core";
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {PostInterface} from './
浏览 0提问于2016-02-25得票数 3
1回答
我是angular 2的新手，实际上我在刷新它的登录页面时遇到了问题，但实际上我想要重定向到仪表板
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
// get observable
const observable = this.store.select(isAuthenticated);
// redirect to sign in page if user is not authenti
浏览 0提问于2018-04-18得票数 0
我试着在angular中添加、删除和更新数据。我可以将数据添加到数组中。但是我无法更新和删除我的数据。
有人能告诉我怎么做删除和更新的HTTP调用吗？
这是我在组件和服务中的代码。
import { Component } from '@angular/core';
import { Observable} from 'rxjs';
import { FormsModule } from '@angular/forms';
import { Employee } from './employee';
浏览 0提问于2017-06-10得票数 0
3回答
我有一个名为customers-list的组件，在其中显示来自API的所有客户：
customers-list.html
<div *ngFor="let customer of customers">
<p>{{customer.name}</p>
</div>
customers-list.ts
import { Component Input} from '@angular/core';
import { ICustomer} from 'src/app/models/app.models&
浏览 1提问于2019-03-21得票数 4
回答已采纳
comment.component.ts:
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'
import { Comment } from 'comment entity path'
import {CommentService} from 'comment service path'
import { Observable } from 'rxjs/Observable';
@Co
浏览 0提问于2017-03-16得票数 6
回答已采纳
我想把我的角4迁移到角5，我从角4迁移到5角，现在我在拦截器上有一个错误来刷新我的标记。如果有401错误，则使用此代码拦截所有请求并刷新令牌：
import { Observable } from 'rxjs/Observable';
import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Us
浏览 3提问于2017-11-07得票数 4
我是Angular2新手，正在尝试为令牌刷新捕获401错误，并计划重试原始请求...
下面是我的authService.refresh方法：
refresh() : Observable<any> {
console.log("refreshing token");
this.accessToken = null;
let params : string = 'refresh_token=' + this.refreshToken + '&grant_type=refresh_token';
l
浏览 2提问于2016-04-28得票数 8
我想知道如何在验证错误后用http拦截器重新发送请求？
我检查是否有错误(刷新我的JWT令牌)，在刷新之后，我想再次提交失败请求。
httpinterceptor.js：
import { Observable } from 'rxjs';
import { Injectable, Inject, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/comm
浏览 1提问于2017-09-06得票数 3
回答已采纳
场景--页面需要从外部源异步加载数据，并根据isLoading属性显示加载映像。使用EventEmitter手动使用按钮触发数据刷新，但在演示中只订阅检索数据(为了简单起见)。管道用于检索数据并将isLoading设置为false或true。
import { Component, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
imp
浏览 1提问于2018-02-26得票数 0
回答已采纳
1回答
如何在ngrx中测试效果？
、、、、
我只想在下面得到我的getUser效果。
我用的是angular5、打字本和ngrx。
我对下面的例子持开放态度。
这是我的效果：
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import { Effect, Actions } from '@ngrx/effects';
import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } f
浏览 0提问于2018-04-25得票数 0
回答已采纳
3回答
这是我的package.json文件：
"dependencies": {
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
&#
浏览 0提问于2018-12-17得票数 3
我有这个代码片段：
SubmitTransaction(transNumber: string, transactionRequest: ITransactionRequestObj): Observable<TransactionResponse> {
this.body = JSON.stringify(transactionRequest);
this.headers = new HttpHeaders().set('Content-Type', 'application/json');
this.headers.ap
浏览 0提问于2018-08-05得票数 7
我到处寻找答案，但一无所获。我有一个拦截器，如下所示，我用它来控制http请求上的auth令牌。我们对其进行了设置，以便当用户发送请求时，如果请求超过15分钟，则刷新并获取新的令牌。它根本没有做到这一点。但是，如果您在10个矿中返回并再次尝试，它将刷新令牌。
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { MsAdalAn
浏览 4提问于2020-02-04得票数 2
1回答
我想在angular路由解析器中从API返回数据，但是如果API数据中有任何错误是由于陈旧的令牌，我会再次刷新令牌，并命中相同的API.Below。
import { CommonUtlitiesService } from './../services/commonutilities.service';
import { UserService } from './../services/user.service';
import { Injectable } from '@angular/core';
import { Resolve }
浏览 9提问于2018-03-04得票数 0
3回答
最初，我有一个函数，它简单地检查令牌的存在，如果它不存在，就将用户发送到登录头。现在，我需要在令牌到期时在刷新令牌的帮助下实现刷新令牌的逻辑。但我得到了一个错误401。刷新函数没有时间工作，拦截器中的工作进一步出错。如何修正代码，使我可以等待刷新完成，获得一个新的令牌，而不是重定向到登录页面？
TokenInterceptor
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
import {Injectabl
浏览 1提问于2018-10-24得票数 4
3回答
我有一个Angular 6组件，其中我有一个网格，它使用异步管道来订阅一个包含项目的observable。我想有一个按钮，当点击时，刷新数据中的观察者。我添加了以下代码： public refreshData(): void {
this.details$ = this._service.getDetails();
} 然后，在模板上： *ngIf="(details$ | async); let d" 所以现在，每次用户单击按钮时，都会执行refreshData方法。代码可以工作，数据会被刷新，但我会为每次点击创建一个新的观察值。有没有更好的方法来处理这个问题？
浏览 58提问于2019-04-02得票数 1
回答已采纳
1回答
我有两个组成部分和一个服务
组件：
1: LoginComponent
2: HeaderComponent (共享)
服务：
1: authentication.service
在LoginComponent中，我使用authentication.service进行身份验证，在成功的身份验证之后，我将用户信息添加到Cookie中，最后，我自动导航到返回的URL页面，在返回的页面中，我有一个必须从保存的Cookie中显示用户信息的头部组件，但是cookie中没有任何内容，除非我用F5按钮手动刷新页面。
我的问题是，如何在不刷新页面的情况下访问cookie？
更新
这就是我想要饼干的地方：
i
浏览 3提问于2017-06-28得票数 0
回答已采纳
试图创建一个真实的应用程序来包装我的api，而我只是不知道如何调试这个错误。
在authService中构建“私有lists.service”似乎是导致错误的根本原因。登录组件工作正常。
例外:默默无闻(承诺)：错误:迪错误:迪错误在NoProviderError.ZoneAwareError ()在NoProviderError.BaseError at NoProviderError.AbstractProviderError at new NoProviderError () at ReflectiveInjector_._throwOrNull ().
要获取列表的列表服务
浏览 4提问于2017-03-12得票数 0
回答已采纳
Angular 7 8 9之后ng构建API正常工作，但是--prod构建其不工作后，我检查了post API url之前是否正常通过，但没有命中...
服务文件：
register(userData: RegisterUser): Observable<RegisterUserResponse>{
return this.http.post<RegisterUserResponse>(this.apiRoutes.signup, userData);
}
环境文件：
const serverUrl = 'http://roo2.in';
expor
浏览 3提问于2021-04-12得票数 0
虽然这看起来与的问题相同
这是一个新版本，这些解决方案不适用于这个新发布的版本
我已经更新到最新的Angular 2 rc1，无法进行编译。我遇到了无法识别“promise”的问题，我最终直接安装了es6-promise类型来解决这个问题。我尝试过输入各种import语句，但没有成功。我在visual studio 2015中运行
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import
浏览 1提问于2016-05-04得票数 62
3回答
在类型记录/角6 (2+)中，有一个基础抽象http服务来派生所有应用程序服务是否被认为是一种良好的实践？例如：
//import the angular Http ...etc
export abstract class MyBaseService{
...
protected get<T>(url: string): Observable<T> {
return this.http.get(...)
.pipe(map(result => result.json() as T));
}
protected pos
浏览 0提问于2018-05-25得票数 4
我有这样的服务：
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { BaseUrl } from ".
浏览 2提问于2017-04-22得票数 2
回答已采纳
1回答
我需要刷新谷歌地图，每次我按下“显示”按钮，更改lat和lng。 我正在使用谷歌地图的AGM。 这里我得到了我想在地图上看到的lat和lng： onShow(_token: string) {
var find = this.model.find(({ token }) => token === _token);
this.postsService.setLat(find.lat);
this.postsService.setLng(find.lng);
console.log(
this.po
浏览 19提问于2020-08-27得票数 1
1回答
消防基地:保持用户登录角度7。
、、、、
我在认证系统中使用了firebase和angularfire2！
问题是，刷新后，用户需要再次登录！我需要避免这个问题，所以我发现firebase通过使用authState给了我这个选项。
但还是没用！
这是authService的代码：
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/internal/observable';
impo
浏览 4提问于2019-02-24得票数 1
2回答
我正在学习角，作为其中的一部分，我正试图了解如何实现我心目中的用例。此时，我正在尝试测试服务器通信。即RxJ的可观测值。
我想到的用例是发送一个POST请求，要求服务器端接受一个X-XSRF-TOKEN头。这是第一次发送GET请求时作为cookie发送回客户端的安全头。换句话说，与服务器的对话不能从POST请求开始。
我希望通过包装角的Http类来实现这一点：
import {Http, RequestOptions, RequestOptionsArgs, Response} from '@angular/http';
import { Injectable} from &#
浏览 12提问于2017-06-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
