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

在控制台中获取数据,但在页面Angular 7中未显示

的问题可能是由以下几个方面引起的:

  1. 数据未正确绑定:在Angular中,数据绑定是通过使用插值表达式或属性绑定来实现的。确保你在页面的相应位置正确地绑定了数据。例如,使用双花括号语法{{ data }}或方括号语法[property]="data"来绑定数据。
  2. 异步数据加载:如果你的数据是通过异步请求获取的,可能存在数据尚未加载完成就渲染页面的情况。在这种情况下,你可以使用Angular的异步管道(AsyncPipe)来处理。确保你在模板中使用了AsyncPipe来订阅和展示异步数据。
  3. 数据未正确传递:如果你的数据是从父组件传递给子组件的,确保你在父组件中正确地传递了数据,并在子组件中正确地接收和展示了数据。
  4. 数据处理错误:在控制台中获取的数据可能需要进行一些处理才能正确地展示在页面上。例如,你可能需要对数据进行过滤、排序或转换等操作。确保你在页面中正确地处理了数据。

如果以上方法都没有解决问题,可以进一步检查以下方面:

  1. 数据是否正确获取:在控制台中打印出来的数据是否正确,确保你获取到了你期望的数据。
  2. 页面是否正确渲染:检查页面的HTML结构和样式是否正确,确保数据应该显示的位置没有被隐藏或覆盖。
  3. 控制台是否有错误信息:检查控制台是否有任何错误信息,例如网络请求错误、数据格式错误等。

总结起来,解决在控制台中获取数据但在页面中未显示的问题,需要确保数据正确绑定、正确传递、正确处理,并检查页面渲染和控制台是否有错误信息。如果问题仍然存在,可以进一步调试和排查可能的原因。

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

相关·内容

Angular 显示英雄列表

页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...最终,你会从远端的数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取的。...打开浏览器的开发者工具,它的控制台中显示出如下错误信息: HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined...英雄们显示列表中,并且所点英雄的详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示页面的底部了。

4K30

Angular 显示英雄列表

页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...最终,你会从远端的数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取的。...打开浏览器的开发者工具,它的控制台中显示出如下错误信息: HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined...英雄们显示列表中,并且所点英雄的详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示页面的底部了。

4.4K70

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

现在我们已经看到了我们自动生成的Angular应用程序的所有部分,这些部分实际发生在浏览器中显示页面中。...但在基本层面上,请考虑如下这些方法:创建组件之后立即调用构造函数,传递给它的数据准备好并填充之前很久才调用该构造函数,而ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...我们最好再创建一个组件来照顾存储卡片列表并将其显示我们的页面上。 当我们描述了我们的组件的职责时,显然这应该是一个卡片列表组件。...为此,让我们我们的控制台中运行: yarn add @ngrx/core @ngrx/store ngrx-store-logger yarn add v1.3.2 [1/4] ?...出于某种原因,我们卡片添加操作中获取重复的数据。让我们试图找出原因。

42.5K10

AngularDart4.0 英雄之旅-教程-05多组件 顶

从哪里开始 开始使用本页面之前,请确认您之前“Tour of Heroes”中拥有以下结构。 如果没有,请返回前面的页面。 ?...@Component注解提供组件的Angular数据。 CSS选择器名称hero-detail将与父组件的模板中标识该组件的元素标签相匹配。...如果您在浏览器开发工具的控制台中查找错误。 没有错误。 就好像Angular忽略了新的标签。 那是因为它忽略了新的标签。 指令列表 浏览器会忽略不能识别的HTML标签和属性。...就像您为内建的Angular指令所做的那样,通过将其列数据指令列表中,告诉Angular关于英雄详细信息组件。...数据访问应重构为单独的服务,并在需要数据的组件之间共享。 您将学习在下一个教程页面中创建服务。

1.8K10

Angular 快速学习笔记(1) -- 官方示例要点

组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你顶层提供该服务时,Angular...把它标记为一个 HeroService 的注入点 ngOnInit 中调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用...本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

3.6K00

Angular 快速学习笔记(1) -- 官方示例要点

组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你顶层提供该服务时,Angular...把它标记为一个 HeroService 的注入点 ngOnInit 中调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用...本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

3.6K50

Angular快速学习笔记(2) -- 架构

视图通常会分层次进行组织,让你能以 UI 分区或页面为单位进行修改、显示或隐藏。 与组件直接关联的模板会定义该组件的宿主视图。...1.2.3 模板语法 模板会把 HTML 和 Angular 的标记(markup)组合起来,这些标记可以 HTML 元素显示出来之前修改它们。...使用管道: {{interpolated_value | pipe_name}} 需要处理的值后面,加上|, 管道还能接收一些参数,来控制它该如何进行转换。...通过把组件中和视图有关的功能与其他类型的处理分离开,你可以让组件类更加精简、高效 组件不应该定义任何诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作。 而要把这些任务委托给各种服务。...它的工作模型基于人们熟知的浏览器导航约定: 地址栏输入 URL,浏览器就会导航到相应的页面 页面中点击链接,浏览器就会导航到一个新页面 点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航

5.2K20

完美实现SpringBoot+Angular普通登录

数据流 SpringBoot+Angular数据流,请参考我的上一篇SpringBoot+Angular前后端分离的数据流浅析。...简而言之:C层负责数据转发, M层(Service服务层)负责具体的数据处理和发出请求, 前台的V层是页面模板,负责组件渲染 后台的仓库层负责和数据库直接对话 前台的实体、后台的实体和数据库的字段一一对应...一开始,可以保存在app组件中,然后V层使用ngIf直接获取C层变量就可以获取登录状态,但是依赖登录状态的 登录状态储存在前台的服务层的一个变量中,所有的组件渲染前都去找这个登录服务要数据,如果用户处于登录状态...图片.png 浏览器输入Url触发方法,生成组件 C层向Teacher服务订阅登录组件 C层获取登录状态isLogin$并赋值给本类的islogin V层渲染页面,根据C的登录状态来决定显示那些内容,如果登录就显示登录页...甚至于后台根本就没有能力判断是谁正在进行数据请求,权限控制当然也就无从谈起。本文的图片只是解释了教程中的逻辑,使教程更容易理解,所以更好的方式还是使用安全性更高的token令牌机制。

1.5K10

(翻译)开始使用ABP.CORE模板 (ASP.NET Core with Angular)

打开程序包管理控制台,然后输入Update-Database 指令来创建你的数据库(确保程序包管理控制台中的默认项目选择的是‘EntityFrameworkCore’)。...运行程序,如果成功将会显示 swagger-ui。 这里还有一点我要补充一下就是数据库连接需要根据实际情况进行修改,‘Web.Host’工程项目下面的appsetting.json中。...控制数据迁移 启动模板包括一个工具,migrator.exe,可以轻松迁移您的数据库。您可以运行此应用程序来创建/迁移主机和租户数据库。 ?...这个应用程序从主机的appsettings.json文件中获取连接字符串。开始它和Web.Host中的appsettings.json文件一样。确保配置文件中的连接字符串是要数据库。...获取主机的连接字符串后,它首先创建主数据库或应用的迁移,如果它已经存在。然后它就会获取租户数据库连接字符串和运行的数据库迁移。

2.9K20

AngularDart4.0 指南-体系结构概述 顶

一个组件控制屏幕中的一小块视图。 例如,以下视图由组件控制: 与导航链接的应用程序根。 英雄名单。 英雄编辑 您可以一个类中定义一个组件的应用程序逻辑 - 它支持视图的功能。...HeroDetailComponent(代码显示显示关于特定英雄的详情,这是用户从HeroListComponent提供的列表中选择的英雄。...这是告诉Angular这个组件的构造函数需要HeroService的一种方法,这样它就可以获得显示的英雄列表。 ? @Component中的元数据告诉Angular从哪里获取为组件指定的主要构建块。...他们不从服务器获取数据,验证用户输入或直接登录到控制台。 他们将这些任务委托给服务。 一个组件的工作是启用用户体验,仅此而已。...Pipes:通过转换显示值来改善用户体验。 Router:客户端应用程序中从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您的应用编写组件测试和端到端测试。

7.9K30

JavaScrip最容易犯的十大错误及其避免方法()

让我们看一个真实应用程序中如何发生这种情况的示例。 我们将选择React,但不正确初始化的相同原则也适用于Angular,Vue或任何其他框架。...当您异步获取数据时,组件将在加载数据之前至少呈现一次 - 无论是构造函数,componentWillMount还是componentDidMount中获取它。...反过来,这意味着ItemList将项目定义为未定义,并且您在控制台中收到错误 - “Uncaught TypeError:无法读取未定义的属性’map’”。 这很容易解决。...Uncaught RangeError 这是几种情况下Chrome中发生的错误。 一种是当你调用一个不终止的递归函数时。 您可以Chrome开发者控制台中对此进行测试。 8....TypeError: Cannot read property ‘length’ 您通常会在数组中找到定义的长度,但如果初始化数组或者另一个上下文中隐藏变量名,则可能会遇到此错误。

11710

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

Angular 中的数据绑定是自动从模型和视图间同步数据Angular的这种数据绑定实现让你可以将应用中的模型和视图的数据看作一个源, 视图在任何时候都是对模型的一个投影,当模型发生变化,相关的视图也会发生变化...这是一个重要的点,因为它使得控制器不用知道将要如何显示,大大的提升了测试的环境; angular.module('scopeExample', []) .controller('MyController...通常ng-apphtml元素上,但是它也可以放到其他的元素上,比如页面上只有一部分是用angular控制的这种情况。...控制台中获取当前元素所在的作用域,需要执行:angular.element(0).scope() or just type scope 作用域内的事件传播: 作用域可以类似dom事件一样的传播事件,事件可以广播到作用域的子作用域或者是发到上层的作用域...这通常使用setTimeout(0)实现,但是setTimeout(0)方式慢,并且因为浏览器渲染页面事件执行之后,所以可能视图还会闪烁。

13.2K20

10 种 JavaScript 最常见的错误

您可以很容易的 Chrome 开发者控制台中进行测试。 ? 发生这种情况的原因很多,但常见的一种是渲染 UI 组件时对于状态的初始化操作不当。...当异步获取数据时,不管它是构造函数 componentWillMount 还是 componentDidMount 中获取的,组件在数据加载之前至少会呈现一次,当 Quiz 第一次呈现时, this.state.items...您可以 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。 ?...您可以 Chrome 开发者控制台中进行测试。 ? 此外,如果您将值传递给超出范围的函数,也可能会发生这种情况。 许多函数只接受其输入值的特定范围的数字。...您可以 Chrome 开发者控制台中进行测试。 ? 您通常会在数组中找到定义的长度,但是如果数组初始化或者变量另一个上下文中,则可能会遇到此错误。让我们用下面的例子来理解这个错误。

8.5K20

前端面试题angular_Vue前端面试题

第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示。...不止是 ng-click 中的表达式,只要是页面中,都不能直接调用原生的 JS 方法,因为这些并不存在于与页面对应的 Controller 的 $scope 中。...5、angular控制器之间如何通信?...digest 循环开始执行,查询每个 watch 是否变化 由于监视scope.val 的 watch 报告了变化,因此强制再执行一次 digest 循环 新的 digest 循环检测到变化 浏览器拿回控制器...scope中,@,=,&进行值绑定时分别表示 @获取一个设置的字符串,它可以自己设置的也可以使用{ {yourModel}}进行绑定的; = 双向绑定,绑定scope上的一些属性; &用于执行父级

14.1K20

2-进军 angular1.x 表达式和指令

2-表达式和指令,数据绑定 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令,数据绑定 3-模型和作用域 scope 4-控制器和过滤器 一 表达式 ng-init...如果有多个 ng-app 可以手动加载 // 页面加载完成后,再加载模块 angular.element(document).ready(function() { //手动加载myApp2 ng-app...数据绑定 输入框中尝试输入:p> 姓名:<input type="text"...使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <runoob-directive...是直接替换指令所在的标签 terminal: true //值为true时优先级低于此指令的其它指令无效 link:function // 值为函数 用来定义指令行为从传入的参数中获取元素并进行处理

2.4K20

Angular 英雄编辑器

hero = 'Windstorm'; 显示英雄 打开模板文件 heroes.component.html。删除 Angular CLI 自动生成的默认内容,改为到 hero 属性的数据绑定。...hero: Hero = {     id: 1,     name: 'Windstorm'   };     constructor() {   }     ngOnInit() {   }   } 页面显示变得不正常了...管道(Pipes) 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道,当然你还可以创建自己的管道。...当用户输入时,这个输入框应该能同时显示和修改英雄的 name 属性。 也就是说,数据流从组件类流出到屏幕,并且从屏幕流回到组件类。...打开浏览器的开发工具,就会在控制台中看到如下信息: Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't

2.5K50
领券