开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ngFor*没有从Angular 5中的REST端点返回数据

ngFor*是Angular框架中的一个指令，用于在模板中循环渲染数据。它可以用来遍历一个集合，并为集合中的每个元素生成相应的HTML代码。

在Angular 5中，ngFor*指令可以通过从REST端点返回的数据来渲染模板。REST（Representational State Transfer）是一种软件架构风格，用于构建网络服务。它使用HTTP协议进行通信，并通过GET、POST、PUT、DELETE等方法来操作资源。

当ngFor*没有从Angular 5中的REST端点返回数据时，可能有以下几个原因：

REST端点返回的数据为空：首先需要确认REST端点是否正确返回了数据。可以通过在浏览器的开发者工具中查看网络请求的响应来验证。
数据绑定错误：在模板中使用ngFor*指令时，需要将数据正确绑定到指令中。可以通过在组件中定义一个属性，并将REST端点返回的数据赋值给该属性，然后在模板中使用该属性来进行循环渲染。
数据格式不匹配：ngFor指令要求数据是一个可迭代的集合，例如数组或对象。如果REST端点返回的数据格式不符合要求，需要对数据进行处理，确保其符合ngFor指令的要求。
异步加载数据：如果REST端点返回的数据是通过异步请求获取的，需要确保在数据加载完成后再使用ngFor*指令进行渲染。可以使用Angular提供的异步处理机制，例如使用Observables或Promises来处理异步数据。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和处理大规模非结构化数据。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等，帮助开发者构建智能化应用。详情请参考：https://cloud.tencent.com/product/ai

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关搜索:ajax的成功函数没有从数据库返回所有行 Angular 2:从ngFor动态生成的输入中检索数据 Angular不显示从$http返回的数据 FutureBuilder Flutter没有从我的计算中返回数据 REST没有返回数据库中的所有值从Protractor中的REST端点进行异步调用以获取测试数据的正确方法？从服务返回数据没有返回正确的数据使用Angular从REST端点检索数据时出现问题-- URL一直显示static/使用REST API从Angular中的.subscribe获取数据使用从REST API接收的数据将数据绑定到Html标签| IONIC和Angular

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart 4.0 高级-HTTP 客户端顶

获取数据在之前的示例中，应用通过返回服务中的模拟英雄来伪造与服务器的交互： import 'dart:async'; import 'package:angular/angular.dart';...并非所有的服务器都返回一个带有数据属性的对象不要返回响应对象尽管getHeroes()有可能返回HTTP响应，但这不是一个好习惯。数据服务的重点在于隐藏消费者的服务器交互细节。...这个简单的数据服务遵循典型的REST指导方针. 它支持一个POST请求和GET heroes使用了同样的端点....新英雄数据必须在请求体中,结构如同一个Hero 实体但是没有id 属性.下面是例子的请求体: { "name": "Windstorm" } 服务器生成id并返回新英雄的JSON表示，包括生成的ID。...JSON 结果如同在getHeroes()中, _extractData() 帮助器从response中提取数据.

9.6K1 0

AngularDart4.0 指南- 显示数据顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。在这个页面中，您将创建一个包含英雄列表的组件。您将显示英雄名单的列表，并有条件地在列表下方显示一条消息。...> ''', Angular会自动从组件中抽取title和myHero属性的值，并将这些值插入到浏览器中。...在任一种样式中，模板数据绑定都具有对组件属性的相同访问权限。用* ngFor显示一个列表属性要显示英雄列表，首先向组件添加英雄名字列表，并将myHero重新定义为列表中的第一个名字。...元素中的* ngFor是Angular“repeater”指令。...如果有三个或更少的项目，Angular会忽略该段落，所以不会显示任何消息。有关更多信息，请参阅模板语法页面的模板表达式部分。 Angular没有显示和隐藏消息。

5.3K1 0

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

他们从列表中选择项目。他们点击按钮。这样的用户操作可能导致数据流向相反的方向：从元素到组件。了解用户操作的唯一方法是侦听某些事件，例如按键，鼠标移动，点击和触摸。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。您可以捕获模板输入变量中的index，并在模板中使用它。...它别无选择，只能拆除旧的DOM元素并插入所有新的DOM元素。 Angular可以通过trackBy避免这种流失。向组件添加一个返回NgFor应跟踪值的方法。在这个例子中，这个值就是英雄的ID。...对于这些小型转换来说，Angular 管道是一个很好的选择。管道是简单的函数，它接受一个输入值并返回一个转换后的值。...另一方面，属性路径中空值时不时出现可能还好，特别是当数据现在为空，将来将返回数据。在等待数据的时候，视图应该没有怨言地呈现，而null属性路径应该像title属性一样显示为空白。

29.9K2 0

Angular 6.x 基础教程

指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...除了 index 外，我们还可以获取以下的值： first: boolean —— 若当前项是可迭代对象的第一项，则返回 true last: boolean —— 若当前项是可迭代对象的最后一项，则返回...true even: boolean —— 若当前项的索引值是偶数，则返回 true odd: boolean —— 若当前项的索引值是奇数，则返回 true 需要注意的是，*ngFor 中的 * 号是语法糖...即把数据从 AppComponent 组件，传递到 SimpleFormComponent 组件中。...第十节 - 组件样式在 Angular 中，我们可以在设置组件元数据时通过 styles 或 styleUrls 属性，来设置组件的内联样式和外联样式。

15.6K2 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

启动 src是开发目录，生产打包后会产生一个dist目录；初步说下你从启动到浏览器看到app works!...，ng2的开发模式就是类似一个树，从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块，比如你要在组件内用到一些表单元素或者数据绑定...，不然会报错 import { FormsModule } from '@angular/forms'; // rest风格的请求模块 import { HttpModule...，用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式数据遍历(*ngFor) *ngFor="let i of item; let index...---- 总结这一篇没有涉及到路由这些和表单这些；准备拆成两个文章来说；路由的配置及懒加载这些，模板驱动的表单及响应式表单[嵌套表单响应等]，回车键触发搜索等。。

6.2K2 0

AngularDart 4.0 高级-结构指令顶

当条件为false时，NgIf从DOM中删除它的宿主元素，将它从DOM事件（它所依附的）中分离出来，将组件从Angular变化检测中分离出来并销毁它。组件和DOM节点可以被垃圾收集并释放内存。...Angular不断检查可能会影响数据绑定的更改。无论组件在做什么，它都会继续这样做。虽然看不见，但组件及其所有后代组件都会占用资源。性能和记忆负担可能很大，响应性可能会降低，用户什么也看不到。...*ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号（*）语法通过模板属性到模板元素。...如果是这样（并且看起来应该如此），Angular应该如何概括取消其他结构指令的能力？这些问题没有简单的答案。禁止多项结构性指令使得它们没有实际意义。...如果条件为假并且视图尚未创建，请告诉视图容器从模板创建嵌入的视图。如果条件为真并且当前显示视图，则清除且销毁视图的容器。没有人读取myUnless属性，因此它不需要getter。

16K2 0

Angular 2.x折腾记：(2)初步认识angular2，不一样的开发模式

基础概念官方中文社区一把梭: 你想要的都概念基本可以在这里找到。 angular-cli 启动 src是开发目录，生产打包后会产生一个dist目录；初步说下你从启动到浏览器看到app works!...，ng2的开发模式就是类似一个树，从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块，比如你要在组件内用到一些表单元素或者数据绑定...，不然会报错 import { FormsModule } from '@angular/forms'; // rest风格的请求模块 import { HttpModule...[class.a]或者[style.font-size]:单一操作类或者某个行内样式数据遍历(*ngFor) *ngFor="let i of item; let index = index": 可以用这个来遍历数组对象...总结这一篇没有涉及到路由这些和表单这些；准备拆成两个文章来说；路由的配置及懒加载这些，模板驱动的表单及响应式表单[嵌套表单响应等]，回车键触发搜索等。。

891 0

Angular 2 架构（下)

通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加简单快捷。如图所示，数据绑定的语法有四种形式。...每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的。插值 : 在 HTML 标签中显示组件值。... *ngFor 告诉 Angular...注入器是一个维护服务实例的容器，存放着以前创建的实例。如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular 。...当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

2.2K2 0

Angular 显示英雄列表

最终，你会从远端的数据服务器获取它。但是目前，你需要创建一些模拟英雄（some mock heroes），并假设这些数据是从远程服务器上获取的。...="let hero of heroes"> *ngFor 是一个 Angular 的复写器（repeater）指令。...它会为列表中的每项数据复写它的宿主元素。在这个例子中就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...添加 click 事件处理器把该组件的 hero 属性改名为 selectedHero，但不要为它赋值。因为应用刚刚启动时并没有所选英雄。

4.4K7 0

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

Angular 的复写器（repeater）指令，使用let xx of xxs遍历绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存，让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...异步处理可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象） b. angular使用了Rxjs，因此使用Observable，Observable 是...*ngFor 不能直接使用 Observable。不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。

3.6K5 0

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

Angular 的复写器（repeater）指令，使用let xx of xxs遍历绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存，让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...异步处理可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象） b. angular使用了Rxjs，因此使用Observable，Observable 是...*ngFor 不能直接使用 Observable。不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。

3.6K0 0

Angular2 之结构型指令几个概念

Angular 有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。 Angular指令可分为三种组件属性型指令结构型指令组件组件其实就是一个带模板的指令。...隐藏元素的利弊当我们隐藏元素时，组件的行为还在继续。它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。... 移除元素组件利把ngIf设置为false，将会影响到组件的资源消耗。angular会从DOM中移除该元素，停止相关组件的变更检测，把它从DOM事件中移除，并且销毁组件。.../core'; /** 选中器[],是匹配页面上的指令，可以有多个名称，由于是自己的指令，所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export...ngFor Angular把*ngFor转换成一个类似的形式： <!

3K2 0

Angular 显示英雄列表

最终，你会从远端的数据服务器获取它。但是目前，你需要创建一些模拟英雄（some mock heroes），并假设这些数据是从远程服务器上获取的。...="let hero of heroes"> *ngFor 是一个 Angular 的复写器（repeater）指令。...它会为列表中的每项数据复写它的宿主元素。在这个例子中就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...添加 click 事件处理器把该组件的 hero 属性改名为 selectedHero，但不要为它赋值。因为应用刚刚启动时并没有所选英雄。

4K3 0

angular知识点梳理第二篇-基本语法

文章目录前文回顾基本语法常见指令 NgModel NgFor NgIf Ng-container 管道前文回顾前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些...，但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变！...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的，所以这里是比较容易理解的，简单的演示一下...-- 默认的是没有key的，这里需要key的地方需要给index重新赋值， --> {{item.title}}...官方的话：为没有 DOM 元素的指令安排宿主管道管道其实就是具有一定功能的函数，主要是一些场景是对字符串什么的进行简单的转化，当然我们也可以自己使用自定义的函数进行数据的转换，只是angular给我们提供了一些初始化的功能函数管道详细列表

2.5K3 0

Angular快速学习笔记（3） -- 组件与模板

显示数据在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...上面的应用选择内联 HTML ，是因为模板很小，而且没有额外的 HTML 文件显得这个演示简单些。...*ngFor 是 Angular 的“迭代”指令。...绑定语法数据绑定是一种机制，用来协调用户所见和应用数据。绑定的类型可以根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。...当它通过属性绑定的形式被绑定时，值会“流入”这个属性。输出属性是一个带有 @Output 装饰器的可观察对象型的属性。这个属性几乎总是返回 Angular 的EventEmitter。

15.2K3 0

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

如果您的结构不匹配，请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行，请启动该应用。当您进行更改时，请通过重新加载浏览器窗口来保持运行。...应用程序重构在添加新功能之前，您可以从应用程序重构中受益。应用模板文件您将对应用程序组件的模板进行多次更新。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分在节点内添加内容hero模板变量来显示英雄属性...但是列表和细节视图没有连接。当用户从列表中选择一个英雄时，选择的英雄应该出现在细节视图中。这个UI模式被称为“主/细节”。在这种情况下，主人是英雄列表，细节是选择的英雄。...当没有选定的英雄时，ngIf指令从DOM中移除英雄详情HTML。没有英雄细节元素或绑定担心。

3K3 0

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

该类通过属性和方法的API与视图交互。例如，这个HeroListComponent有一个heroes属性，返回从服务中获取的英雄列表。...这是告诉Angular这个组件的构造函数需要HeroService的一种方法，这样它就可以获得显示的英雄列表。 ? @Component中的元数据告诉Angular从哪里获取为组件指定的主要构建块。...建筑外包是你必须添加元数据到你的代码，以便Angular知道该怎么做。数据绑定如果没有框架，您将负责将数据值推送到HTML控件中，并将用户响应转化为操作和值更新。...用户的更改也会返回到组件，将属性重置为最新值，就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定，从应用程序组件树的根到所有子组件。 ?...服务通常是一个狭义的，明确的目的。它应该做一些具体的事情，并做好。例子包括：日志服务数据服务消息总线税计算器应用配置 Angular中没有特别指定服务。 Angular没有定义服务。

7.9K3 0

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过 NgFor 显示数组型属性通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...要显示组件的属性，插值是最简单的方式，格式为：{{属性名}}。...以下代码基于 Angular 2 TypeScript 环境配置来创建，你可以在该章节上下载源码，并修改以下提到的几个文件。...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值，并显示在浏览器中，显示信息如下：使用 ngFor...网站列表: {{ site }}

2.4K2 0

Angular 中结构指令模式 - 它们是什么且怎么使用

在 Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。结构指令是 Angular 中最强大的特性之一，然而它们却频繁被误解。...在 Angular 中，有三种标准的结构化指令。...*ngIf - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版） *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图下面是一个结构化指令的例子。...指令我们使用 *ngFor 指令来遍历数组。...当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。

3.8K2 0

Angular 6.x 快速入门

第二节 - 插值表达式在 Angular 中，我们可以使用插值语法实现数据绑定。...name = 'Angular'; } 定义数据接口在 TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象外，也可用于对「对象的形状（Shape）」进行描述...实际项目中，最常用的指令是 ngIf 和 ngFor 指令。... ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。...ngFor 指令语法 ...

14.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭