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

Angular .then()不工作(发送get请求后未刷新视图)

Angular是一种流行的前端开发框架,它使用TypeScript编写,并且具有许多强大的功能和工具。在Angular中,.then()是Promise对象的方法之一,用于处理异步操作的结果。然而,如果在发送get请求后未刷新视图,可能有几个原因导致这个问题。

首先,确保你正确地使用了Promise和.then()方法。在发送get请求后,你应该返回一个Promise对象,并在.then()方法中处理响应数据。例如:

代码语言:typescript
复制
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData(): Promise<any> {
  return this.http.get('api/data')
    .toPromise()
    .then(response => {
      // 处理响应数据
      console.log(response);
    })
    .catch(error => {
      // 处理错误
      console.error(error);
    });
}

其次,检查你是否正确地调用了getData()方法。在Angular中,你可以在组件的生命周期钩子函数中调用该方法,例如ngOnInit()。

代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor(private service: DataService) {}

  ngOnInit(): void {
    this.service.getData()
      .then(() => {
        // 刷新视图
      });
  }
}

另外,确保你在视图中正确地绑定了数据。在Angular中,你可以使用插值表达式或指令(如ngFor)来显示数据。

代码语言:html
复制
<div>{{ data }}</div>

如果以上步骤都没有解决问题,可能是由于其他因素导致的。你可以进一步调试代码,查看是否有其他错误或警告信息。此外,你还可以使用浏览器的开发者工具来检查网络请求和响应。

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

相关·内容

现代web开发方法

让我们看看传统的Web应用程序是如何工作的。通常,一个完整的堆栈服务器端应用程序在服务器本身上生成Web应用程序的所有数据。只有这样才能在页面呈现之前将其发送给客户端 ?...单页应用程序概述(SPA) 内容从数据库中获取,然后通过控制器传递,最后在视图模板发送前与视图模板合并 这体现在每次浏览应用程序或网站时重新加载的页面的形式。...单个页面应用程序向服务器发送一个HTML文件框架的请求,以及样式和脚本 与此同时,以Ajax请求的形式向服务器发出后续请求。...Ajax请求 - 将请求发送到服务器以便在不重新加载页面的情况下获取数据。...请求的数据,达到在刷新整个页面的情况下,在用户执行某些DOM事件(比如点击,滚动)等时,页面的局部刷新呈递新数据的展现,至于更深的体会,还是要多撸代码,概念的东西说多了都是故事,虚无缥缈的,代码就是对概念理论最好的解释

2.2K10

【AngularJS】—— 13 服务Service

$http的使用   AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据。   ...采用如下的格式: $http({   method:'GET',//http请求的类型   url:'data.json'//请求的地址 }).success(function(data,status,...name":"test1" },{ "name":"test2" },{ "name":"test3" }]   利用web容器,本文使用的是基于nodejs的http-server,启动在网页中输入相应的...这样可以有效的防止,不停的刷新请求,造成网页的刷新抖动。   在函数内部,调用了我们自己的服务提供的userList方法。当请求成功时,绑定返回值到users中。users会动态的刷新内容。   ...通过测试发现:当我们快速的输入4321时,虽然$watch都监控到了变量的变化,但是只有停止时间超过350ms才会发送请求。   全部的代码样例: <!

1.4K50
  • 【Hybrid开发高级系列】AngularJS(二)——常用$服务

    cache: 布尔类型或者缓存对象,设置之后angular会缓存get请求。     timeout: 数值,延迟请求     responseType:字符串,响应类型。...拦截器允许你: 通过实现 request 方法拦截请求:         该方法会在 http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。...通过实现 requestError 方法拦截请求异常:         有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。...切换视图的原理:Angular发起下图的请求:     XHR:SmlHttpRequest,本质是Ajax。...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view刷新 http://www.oschina.net/question/2356458

    42040

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    /angular.dart'; import 'package:http/http.dart'; import 'hero.dart'; 刷新浏览器。...更新HeroService.getHero()方法以创建一个get-by-id请求:lib/src/hero_service.dart (getHero) Future getHero(int...更新英雄的细节 尝试在英雄详情视图中编辑英雄的名字。 当你输入时,英雄的名字在视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。 什么改变了?...当用户在搜索框中输入一个名字时,你会对这个名字过滤的英雄进行重复的HTTP请求。 首先创建HeroSearchService,将搜索查询发送到服务器的Web API。...你永远不会比300ms更频繁地发出请求。 distinct()确保仅当过滤器文本发生更改时才发送请求

    11K30

    Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?

    这里提一点,前端三大框架(Angular,React,Vue)的数据驱动来更新视图的原理,即 MVVM 的实现。 为什么数据发生变化,绑定的视图就会刷新了呢?...,只需要关心数据的变化工作即可。...总结一下: 三大框架实现的原理其实有所差异 react 是通过调用 setState() 方式来告知视图刷新; vue 是通过将声明在 data 中的数据属性转换为存取器数据(set 和 get)...的方式,来监听数据变化的时机; angular 则是在会触发视图变化的情况下,主动去检测绑定的数据源,比对下是否有发生变化来判断是否需要刷新视图。...对于三大框架来说,他们的视图刷新并非是这么简单的实现。

    1.7K10

    2020vue面试题及答案_人际关系面试题及答案

    会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) history 模式 工作原理: 主要利用 history.pushState() API 来改变URL, 而刷新页面...其实一共有五种模式可以实现改变URL, 而刷新页面....⽽⼦组件修改好数据,想把数据传递给⽗组件。可以采⽤emit⽅法。...url地址显⽰:query更加类似于我们ajax中get传参,params则类似于post,说的再简单⼀点,前者在浏览器地址栏中显⽰参数,后者则不显⽰ 注意点:query刷新不会丢失query...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    8.7K20

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    前面说的那些繁重的工作都会被交给Yeoman来完成。让我们来试试用Yeoman来创建一个AngularJS项目吧!...当选中了’generator-angular,按下回车执行安装,它所依赖的Node包就会开始被下载了。         ...Yeoman将会自动构建你的应用、拉取需要的依赖并在你的工作流中创建一些有帮助的Grunt任务(GruntTasks)。几分钟,我们就能正式开始啦!...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view刷新 http://www.oschina.net/question/2356458...p=1 深入理解ng里的scope http://get.ftqq.com/462.get angularJs前端的页面分解与组装 http://hudeyong926.iteye.com/blog/2111664

    24720

    Angular: 最佳实践

    组件 Component 组件是 Angular 的核心特性,如果你设法让它们被组织得井井有条,你可以认为你工作已经完成了一半。 考虑拥有一个或者几个基本组件类。...我们知道一个路由对应一个 Angular 组件,但是我推荐你使用容器组件,它将处理数据(如果有数据需要传递的话)并将数据传递给另外一个组件,该组件将使用输入所包含的真实视图和 UI 逻辑。...模版 Templates Angular 是使用 html 模版(当然,还有组件、指令和管道)去渲染你应用程序中的视图 ,所以编写模版是不可避免的事情,并且要保持模版的整洁和易于理解是很重要的。...,而无需深入查看视图。...读者可能意识到我并没有写关于 Directives 和 Pipes 的相关内容,那是因为我想写篇详细的文章,关于 Angular 中 DOM 是怎么工作的。

    2.8K40

    第217天:深入理解Angular双向数据绑定的原理

    将设计转换成浏览器能理解的语言,便是html和css主要做的工作。而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作。...很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求)。...那么数据进行更新,页面上相应的位置也能自动做出对应的修改,便是数据绑定。 在以前的开发模式中,这一步一般通过jq操作DOM结构,从而进行更新页面。但这样带来的是大量的代码和大量的操作。...ng-bind:将angular中的变量显示到页面中。...$watch(‘totalCart’, calculateDiscount); 4、$scope(上下文模型) 视图和控制器之间的桥梁 用于在视图和控制器之间传递数据 利用$scope暴露数据模型(数据

    3.6K20

    VUE跨页面传值的精妙

    众所周知,以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。...而在技术日新月异的现在,Vue, React,Angular在代替旧的前端框架已经是大势所趋了。 一、vue简介 Vue是一套用于构建用户界面的渐进式框架。...json形式传参 传参方式: 1.自己拼接为键值对 2.使用transformRequest,在请求发送前将请求数据进行转换 3.如果使用模块化开发...,可以使用qs模块进行转换 axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库 2.2 ajax传参格式 ajax是jquery...封装的一个前端方法,通过请求后台API接口方式,用以局部刷新和动态展示页面。

    3.6K30

    深究AngularJS(3)——$res

    '},     'delete': {method:'DELETE'}   }; 这些方法会调用内置的$http服务~ 当异步请求成功,数据从服务器端取回,被封装到一个$resource服务的一个对象实例中...$save();   }); 这种方式封装Ajax,不仅仅使得代码更加优雅,而且还能配合ng的视图渲染:当数据没有返回之前,模板引擎不会渲染,一旦异步数据获取完成,会自动触发模板引擎的渲染机制把数据呈现到视图中...User.get({id:'123'}, successFn, errorFn); 该方法向url发送一个get请求,并期望一个json类型的响应。...这里会向/api/users/123发送一个请求,successFn处理请求成功响应,errorFn处理错误。...save(params, payload, successFn, errorFn); save方法会发起一个post请求,params参数用来填充url中变量,对象payload会作为请求体进行发送

    1.1K10

    JSON Web Token(JWT)教程:一个基于Laravel和AngularJS的例子

    它的工作原理 浏览器向包含用户身份和密码的服务器发出POST请求。服务器使用在用户浏览器上设置的cookie进行响应,并包含用于标识用户的会话ID。...JSON Web Token 的工作原理 浏览器或移动客户端向包含用户登录信息的认证服务器发出请求。认证服务器生成新的JWT access token并将其返回给客户端。...我们将使用我们的AngularJS SPA视图 Route::get('/', function () { return view('spa'); }); 用户注册 当我们使用用户名和密码向/signup...一旦我们进入我们项目的主页,后端将提供resources/views/spa.blade.php视图用来引导Angular应用程序。...每个路线都对应于部分HTML视图。我们还定义了两个常量,其中包含我们对后端的HTTP请求的URL。 请求拦截器 AngularJS的$ http服务允许我们与后端通信并发出HTTP请求

    30.6K10

    vue页面刷新_vue强制重置组件

    . wiindow.location.reload([bForceGet]) 该方法强迫浏览器刷新当前页面 bForceGet 可选参数,默认为false,从客户端缓存里取当前 true,则以get方式...,从服务器端获取最新的页面,相当于页面f5刷新 wiindow.location.replace(URL) 该URL参数你所要跳转的地址,如果想实现当前页面刷新,你可以这样做 wiindow.location.replace... 这里我来说明一下,我们的主体思路,我想可以通过视图的显隐来达到我们想要的刷新,所以我们就在这里声明了一个方法,先让视图消失随后又出现,这种方法有什么好处呢,你可以刷新局部页面,也可以刷新全部页面...,刷新次数无限飙升,还没有两秒,刷新次数已经达到了上万次,你试的想一下,如果你有后台,不断地刷新,向后台发送请求,就这每秒请求的频率,不把你服务器搞崩才怪,那为什么会陷入死循环呢,很简单,你刚加载页面的时候他触发一次刷新...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.4K10

    AngularJS的digest循环和$apply

    最近在写AngularJS,遇到一个问题,在Ajax异步请求后台数据,然后将结果赋值给当前scope中某对象的属性,在页面中怎么都取不到,然而在js端却可以正常打印出来。...一、传统事件触发 在标准的浏览器流程中,页面加载、$http请求返回响应、鼠标移动以及按钮被点击等情况都会触发事件。...$watchCollection('names', function(newNames, oldNames, scope) { // 发送变化的处理 }); 2....scope.user.firstName和$scope.user.lastName组成,那么这两个值的变化多会引起fullName的变化,因此需要再次确认); (6)$digest循环退出,浏览器重绘DOM以刷新视图...(1)建议在控制器中使用$apply(),因为这样会导致难以测试。 (2)jquery和angular同时使用被视为一个肮脏的行为。

    3.2K41

    AngularDart4.0 指南- 显示数据 顶

    当你完成,它应该是这样的:lib/app_component.dart import 'package:angular/angular.dart'; @Component( selector: '...当这些属性改变时,Angular会更新显示。 更准确地说,重新显示是在与视图相关的某种异步事件之后发生的,例如按键,计时器完成或对HTTP请求的响应。...刷新浏览器。...用NgIf进行条件显示 有时候,只有在特定情况下,应用程序才需要显示视图视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。...浏览器应该自动刷新,消息应该消失。 概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。

    5.3K10

    ajax和vue.js

    ajax依赖于HTTP协议,去发送请求。 ajax是默认支持异步传输数据; 默认支持局部刷新/无刷新。 同步:低效的,一件一件事情的干。...post会打一个http包,然后再发送数据,更加的安全。 简写的方式中,code是发送的数据,是一个字典的形式,可以加多个数据,后面只有一个回调函数(是成功的事件),不支持失败的事件。...如果工作中不介意这些,那么可以采用简写的方式。在简写的格式中要注意一个问题,那就是发送的数据类型是json要在括号里面末尾加上,用引号直接写json就可以了,如果写的话,会显示变量为被定义。...type: 请求方式 get:url发送数据 post:打包http包 datatype: 返回的数据格式 success:成功 error:失败 2.1.2工作中的写法 ***success 换成...vue兼容低版本浏览器 vue注重数据,只要数据变化,页面视图随着数据的变化而变化。

    10.4K21
    领券