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

在div中使用ngfor不显示restful api响应的结果

可能是由以下几个原因导致的:

  1. 数据未正确绑定:首先需要确保ngfor指令正确地绑定到了数据源上。在Angular中,ngfor指令用于循环遍历一个集合,并将每个元素渲染到HTML模板中。确保你已经正确地将API响应的结果绑定到了一个数组或对象上。
  2. 异步加载数据:如果API响应是异步加载的,可能会导致ngfor指令在数据还未返回时就已经执行完毕。在这种情况下,你可以使用Angular的异步管道(async pipe)来处理。例如,可以将ngfor指令改为ngfor="let item of items | async",其中items是一个Observable对象。
  3. 数据未正确处理:如果API响应的数据结构与你在模板中使用的数据结构不匹配,可能会导致ngfor指令无法正确渲染数据。确保你正确地处理了API响应的数据,并将其转换为适合ngfor指令的数据结构。
  4. API请求失败:如果API请求失败或返回错误的响应,可能会导致ngfor指令无法获取到正确的数据。在这种情况下,你可以在组件中处理错误,并提供适当的错误处理机制,例如显示错误消息或重试请求。

总结起来,要解决在div中使用ngfor不显示restful api响应的结果的问题,你需要确保正确地绑定数据、处理异步加载、正确处理数据结构,并处理API请求可能出现的错误。

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

相关·内容

Angular: 最佳实践

我们应该为我们数据添加类型限定,下面有些有用知识点: 使用类型联合和交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据时非常有用。...并且模版每个地方都会显示通知,你可以使用 ngClass 设置未通知样式。现在,我们想将通知状态与枚举值进行比较,我们必须将枚举导入组件。...小经验:当我们带有子元素 HTML 元素上编写 ngFor 指令时,请考虑将该元素分离为单独组件,就像下面: <div *ngFor="let user...比如,你 API 提供了一个接入点,返回一个 Country 对象 JSON 对象,你可以应用程序使用这列表数据实现选择国家/地区功能。...当然,国家不会每天都会发生变更,所以最好做法就是拉取该数据并缓存,然后应用程序生命周期内使用缓存版本,而不是每次都去调用 API 请求该数据。

2.8K40

AngularDart4.0 指南- 模板语法二 顶

Angular你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。...下一个示例捕获名为i变量索引,并使用像这样英雄名称来显示它。...接下来部分将介绍这些操作符两个:管道和安全导航操作符。 管道操作符(|) 准备使用绑定之前,表达式结果可能需要进行一些转换。...使用管道运算符(|),它们很容易模板表达式应用: Title through uppercase pipe: {{title | uppercase}} 管道运算符将左边表达式结果传递给右边管道函数

29.9K20

AngularDart 4.0 高级-结构指令 顶

性能和记忆负担可能很大,响应性可能会降低,用户什么也看不到。 从积极方面来说,再次显示元素很快。 该组件以前状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。...您可以分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以模板单个实例引用。...满足Angular模板类似需求。 编写一个结构指令 本节,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件为true时显示模板内容。

16K20

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

内存Web API服务,如下所示,使用http库MockClient类实现。 所有的http客户端实现共享一个共同客户端接口,所以你将有应用程序使用客户端类型,以便您可以自由切换实现。...然后使用_extractData辅助方法来解码响应主体。 响应JSON有一个单一数据属性,它拥有主叫方想要英雄列表。 所以你抓住这个列表并把它作为已解决Future值返回。...URL英雄id标识服务器应该更新哪个英雄。 另外,响应数据是单个英雄对象而不是列表。...终点直道 你旅程尽头,你已经完成了很多。 您添加了必要依赖关系,以应用程序中使用HTTP。 您重构了HeroService以从Web API加载英雄。...您配置了内存Web API。 您了解了如何使用Streams。

11K30

Angular快速学习笔记(3) -- 组件与模板

显示数据 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定到 Angular 组件属性。...="let hero of heroes"> {{ hero.name }} ` 模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性...它是语法不可或缺一部分 通过 NgIf 进行条件显示 有时,应用需要只特定情况下显示视图或视图一部分,这个时候使用ngif,同vue.js里v-if {{hero.name}} {{heroInput.value}} 模板语句 模板语句用来响应由绑定目标...下面介绍其中两个:管道和安全导航操作符 管道操作符 ( | ) 绑定之前,表达式结果可能需要一些转换。例如,可能希望把数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。

15.2K30

AngularDart4.0 英雄之旅-教程-04明细 顶

必备条件 继续本“英雄之旅”页面之前,请确认您在“英雄编辑器”页面之后具有以下结构。 如果您结构匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件英雄列表绑定到模板,迭代它们,并单独显示它们。...显示数据Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页ngFor部分 节点内添加内容hero模板变量来显示英雄属性...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示列表下方时,很难列表识别选定英雄。...您将Hero类移到lib / src下自己文件。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

3K30

Angular 6.x 基础教程

第三节 - 事件和模板引用 Angular ,我们可以使用 (eventName) 语法,进行事件绑定。此外,可以使用 #variableName 语法,定义模板引用。...,若我们改变绑定表达式为 (click)="onClick(myInput)" ,当我们点击按钮时,控制台输出结果是: 通过该输出结果,我们可以知道 #variableName...第四节 - 事件进阶 获取鼠标事件 第三节示例,假如我们需要获取鼠标事件,那应该怎么办呢?...指令 Angular 我们可以使用 ngFor 指令来显示数组每一项信息。...AppComponent 组件模板,我们使用 let item of items; 语法迭代数组每一项,另外我们使用 index as i 用来访问数组每一项索引值。

15.6K20

Angular DOM 抽象概述

通过 DOM API 我们能够方便地获取指定元素,比如获取谷歌首页 id 为 q 输入框: document.querySelector("#q"); 查询结果为: <input id="q" aria-hidden...,我们可以通过 DOM API 获取页面任意元素,并进行相关操作。...模板元素是一种机制,允许包含加载页面时渲染,但又可以随后通过 JavaScript 进行实例化客户端内容。我们可以将模板视作为存储页面上稍后使用一小段内容。...,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons...浏览器环境,虽然通过 ElementRef nativeElement 属性,我们可以方便地获取对应 DOM 元素,但我们最好不要利用 DOM API 进行 DOM 操作,最好通过 Angular

3.5K30

Angular 显示英雄列表

Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义那个。...英雄们显示列表,并且所点英雄详情也显示了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

AngularDart 4.0 高级-管道 顶

API参考管道主题中了解更多关于这些和许多其他内置管道信息; 过滤包含单词“管道”条目。 由于本页附录解释了Angular没有FilterPipe或OrderByPipe原因。...当您使用管道时,Angular会选择更简单,更快速变更检测算法。  不使用管道 在下一个示例,组件使用默认积极变化检测策略来监控并更新其hero列表每个英雄显示。...*ngFor="let hero of heroes"> {{hero.name}} 伴随组件类提供英雄,将英雄添加到列表,并可以重置列表。...以下代码,管道只在请求URL发生更改和缓存服务器响应时调用服务器。...下一步 管道是封装和共享常见显示值转换好方法。 像样式一样使用它们,将它们放入模板表达式,以丰富视图吸引力和可用性。 API参考中探索Angular内置管道库。

6.3K20

Angular2 之 结构型指令几个概念

组件原本要做哪些事情仍然进行!它还是占用着那么多资源。 另外一方面,重新显示这个组件会很快。 组件以前状态被保留着,并随时可以显示。...总结 基于上面的利弊分析,无论是我们使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...标签 结构型指令,比如ngIf,使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示模板级别使用。...要么显示包含在Template标签,要么隐式使用*这种语法糖去包装在Template标签。它简化了ngIf和ngFor —— 无论是写还是读。...-- (A) *ngFor div --> {{ hero }} <!

3K20

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作,此外,由于我们使用了数据绑定,this.vm.dessertSlides...angular脏检测机制是基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...是的,大多场景可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...= 'four'"> 四 执行看下效果: ? 数据未正确应用 对比上一节实际效果图,会发现这里只显示了两个图片,什么原因呢?

1.4K20

Angular 显示英雄列表

Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义那个。...英雄们显示列表,并且所点英雄详情也显示了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

AngularDart4.0 指南- 模板语法一 顶

{{1 + 1}}内插大括号包围模板表达式1 + 1.在下面的属性绑定部分[property] =“expression”,模板表达式显示符号右侧引号。...{{hero.name}} {{heroInput.value}} 表达式术语上下文是模板变量和组件成员混合...如果引用这些名称空间名称,则模板变量名称优先,后面是指令上下文,最后是组件成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...这个规则对Angular“单向数据流”策略是必不可少。您不必担心读取组件值可能会改变一些其他显示值。这个视图整个渲染过程应该是稳定。...它在显示它们之前清理这些值。 它不允许带脚本标记HTML泄露到浏览器,既不能使用插值也不能使用属性绑定。 <!

5.1K10
领券