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

ngFor无法在角度2和显示空白页上工作

ngFor是Angular框架中的一个指令,用于在模板中循环渲染数据。它可以用于在前端开发中动态地生成列表或表格等重复性的元素。

在Angular 2及以上版本中,ngFor指令的用法有所变化。在Angular 2中,ngFor指令需要使用*号语法,例如:

代码语言:txt
复制
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

在Angular中,ngFor指令的工作原理是通过遍历一个可迭代对象(如数组)来生成相应的HTML元素。它可以接受一个迭代器表达式,用于指定要遍历的数据集合,并使用let关键字来定义一个局部变量,以便在模板中引用每个迭代项。

然而,如果在Angular 2中使用ngFor指令时遇到问题,导致无法工作或显示空白页,可能有以下几个原因:

  1. 数据源为空:如果ngFor指令的数据源为空数组或null,将导致无法生成任何元素。在使用ngFor指令之前,确保数据源中有有效的数据。
  2. 数据绑定错误:ngFor指令需要正确的数据绑定才能正常工作。确保在使用ngFor指令时,数据绑定表达式正确地引用了要遍历的数据集合。
  3. 模板语法错误:Angular模板语法非常严格,如果在ngFor指令的模板中存在语法错误,可能会导致无法正常工作。检查模板中的语法错误,确保使用了正确的语法。

如果以上原因都不是问题所在,可能需要进一步调试和排查。可以使用浏览器的开发者工具查看控制台输出,以便捕获任何错误信息。此外,也可以查阅Angular官方文档或相关社区资源,寻找类似问题的解决方案。

腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景来确定。

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

相关·内容

如何利用PythonJetson TX2抓取显示摄像头影像

本贴中,贴主“我”分享了如何使用python 代码(及 OpenCV)Jetson TX2抓取显示摄像头影像,包括IP摄像头, USB 网络摄像头Jetson板载摄像头.这个简单代码也同样可以...1 准备工作 需要在Jetson TX2安装 GStreamer 支持的 pythonOpenCV.。我是安装opencv-3.3.0 python3....ACCELERATED GSTREAMER FOR TEGRA X2 USER GUIDE:文档里讲解了nvcamerasrc, nvvidconv omxh264dec . 3 如何运行Tegra...源代码 (因为顾虑到很多人访问不了,lady把代码copy到这里:http://www.jetsoner.com/thread-148-1-1.html) 按照下面步骤利用Jetson板载摄像头抓取显示影像...(我还连接了一个更快的r - cnn模型来做人类头部检测,并在捕获图像绘制边框,但是主视频捕获/显示代码是相同的。) ? (点击阅读原文看代码吧...微信排版太麻烦了...lady真是已经尽力了)

2.5K120

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

显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor模板输入变量模板语法页的ngFor部分 节点内添加内容hero模板变量来显示英雄属性...这是你ngFor指令中定义的同一个英雄变量。 在用户输入页面模板语法页面的事件绑定部分了解有关事件绑定的更多信息。...Angular无法显示null selectedHero的属性并抛出以下错误,浏览器的控制台中可见: EXCEPTION: TypeError: Cannot read property 'name...结构指令页面模板语法页面的内置指令部分阅读有关ngIfngFor的更多信息。 格式化选中hero 当选择的英雄细节显示列表下方时,很难列表中识别选定的英雄。...你增加了选择英雄显示英雄的细节的能力。 您了解了如何在组件模板中使用核心指令ngIfngFor。 您在CSS文件中定义了样式,并使用它们来设置应用程序的样式。

3K30

AngularDart 4.0 高级-结构指令 顶

但它确实解释了它们是如何工作的以及如何编写自己的结构指示。 指令拼写 本指南中,您将看到UpperCamelCaselowerCamelCase拼写的指令。 你已经看到了NgIfngIf。...NgFor指令具有比本指南中显示的NgIf更多的功能,包括必需的可选的。 至少NgFor需要一个循环变量(let hero)一个列表(heroes)。...它从不直接显示。 事实呈现视图之前,Angular用注释替换及其内容。 如果没有结构指令,而只是将一些元素包装在中,那些元素就会消失。比如短语”Hip!...UnlessDirective条件为false时显示内容。...没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgForNgSwitch内置指令如何工作

16K20

Angular 显示英雄列表

列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 顶部添加  然后添加表示无序列表的 HTML 元素()   中插入一个  元素,以显示单个...给英雄们应用样式表 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄从列表中选中某个英雄时,应该给出视觉反馈。...你可以本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式样式表都是局限于该组件的。 ...Angular 会把所点击的  的 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式中定义的那个。...这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示页面的底部了。

4.4K70

Video里的poster填满窗口的方案

用Video播放视频,视频能自适应屏幕大小,但是它的Poster(海报封面)继承了原尺寸比例,无法自动缩放或拉伸,不得技巧的话,很难处理。 ?...普通居中 现在给出两种方案: 一、模拟Poster法 如果尝试css控制不了Poster的话,那只好换个角度来实现——模拟Poster,我们Video外面包一个div,div的背景图为Poster的图片...poster="{{item.cover}}" crossorigin playsinline webkit-playsinline> <source *ngFor...image.png 可见,红色框选部分的Poster背景重叠了,那我们不要它,直接把html中的Poster去掉或者赋值为空,发现连背景都不显示了,只有黑屏: ?.../assets/imgs/cover.png" crossorigin playsinline webkit-playsinline> <source *ngFor="let cItem

1.8K20

Angular 显示英雄列表

列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 顶部添加  然后添加表示无序列表的 HTML 元素()   中插入一个  元素,以显示单个...给英雄们应用样式表 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄从列表中选中某个英雄时,应该给出视觉反馈。...你可以本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式样式表都是局限于该组件的。 ...Angular 会把所点击的  的 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式中定义的那个。...这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示页面的底部了。

4K30

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

这些变化通过系统渗透,并最终显示相关视图。 双向绑定([(…)]) 您经常希望显示数据属性,并在用户进行更改时更新该属性。 元素另一方面为元素更改事件组合设置特定元素属性监听。...修改后的size值流向样式绑定,使显示的文本变大或变小。 双向绑定语法实际只是属性(property)绑定事件绑定的语法糖。...*ngFortrackBy NgFor指令可能表现不佳,特别是大型列表中。 对一个项目,删除项目或添加项目的小改动可以触发DOM操作的级联。...@Output) 到目前为止,该页面主要集中绑定到模板表达式中的组件成员以及出现在绑定声明右侧的语句。...现在是时候把这些知识应用到你自己的组件指令

29.9K20

AngularDart4.0 指南- 显示数据 顶

它应该显示标题英雄的名字: ? 模板内嵌或模板文件? 您可以将组件的模板存储两个地方之一中。...用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表中的第一个名字。...此刻它显示英雄的idname。修正这个问题,只显示英雄的name属性。...“模板语法”页面的ngIf部分阅读有关ngIf*的更多信息。 双引号内的模板表达式,* ngIf =“heros.length> 3”,看上去表现很像Dart。...Angular没有显示隐藏消息。 它正在添加删除DOM中的段落元素。 这可以提高性能,特别是大型项目中,当有条件地包含或排除大量的HTML与许多数据绑定。 试试看。

5.3K10

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...list: Array = [{ title: '栗子', id: 0 }, { title: '苹果', id: 1 }, { title: '橘子', id: 2...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里隐藏要区别开,他的效果css中的display:none效果是一致的,visibility...,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹,因为他是一个不被渲染的tag,所以使用的时候是没有什么问题的,举个例子!

2.5K30

小白如何用Angular开发一个简单的Web应用

最近开始学习 Angular,所以想分享下从个人小白的角度如何去开发一款简单的 Web 应用。...图片Step 2 使用Angular CLI创建项目终端中运行第一个代码,使用 Angular CLI 创建一个名为 todo-app 的新项目:ng new todo-app这条代码会自动完成初始化相关的设置工作...Step 3 定义组件模板到了第二步就需要,src目录下创建名为 app 的组件:ng g component app接下来,我们需要打开里面的 app.component.ts 文件,定义 todo...export class AppComponent { todos: Todo[] = []; } app.component.html 里添加列表的显示逻辑: <li *ngFor...== todo);}最后我们启动开发服务器就完成了整个开发工作,整个开发流程是最基础的组件、数据绑定事件处理,这样就实现了一个简单的To-Do列表应用。

26351

Angular2 之 结构型指令几个概念

结构型指令 结构型指令通过添加删除 DOM 元素来改变DOM的布局。 我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。...它仍然附加子啊它所属于的DOM元素,它仍然监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然进行!它还是占用着那么多的资源。... 这时候显示的内容是'Hip! Hooray!',Angular的控制下,DOM的效果是不同的。 ?...要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIfngFor —— 无论是写还是读。...宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

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

> {{ hero.name }} ` 模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性 *ngFor 是 Angular 的“迭代...模板绑定是通过 property 事件来工作的,而不是 attribute. 数据绑定的目标是 DOM 中的某些东西。... 多数情况下,插值表达式是更方便的备选项。 实际渲染视图之前,Angular 把这些插值表达式翻译成相应的属性绑定。...ngOnInit() Angular 第一次显示数据绑定设置指令/组件的输入属性之后,初始化指令/组件。...ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。每个 Angular 变更检测周期中调用,ngOnChanges()  ngOnInit() 之后。

15.2K30

Angular 2 数据显示

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

2.4K20

AngularDart 4.0 高级-管道 顶

您可能会注意到,您希望许多应用程序内部许多应用程序中重复执行许多相同的转换。 你几乎可以把它们想象成风格。 事实,您可能会喜欢将它们应用到HTML模板中,就像样式一样。...所有管道都是这样工作的。 Date(日期)Currency(货币)管道需要ECMAScript国际化API。 Safari其他旧版浏览器不支持它。 您可以使用polyfill添加支持。...PipeTransform接口定义该方法并指导工具编译器。 从技术讲,这是可选的; 无论角度如何,Angular都会查找并执行transform方法。 现在您需要一个组件来演示管道。...更常见的情况是,您不知道数据何时发生变化,特别是以多种方式变异数据的应用程序中,可能在远离应用程序的位置。 这样的应用程序中的组件通常无法了解这些更改。 此外,篡改组件设计以适应管道是不明智的。...下一步 管道是封装共享常见显示值转换的好方法。 像样式一样使用它们,将它们放入模板表达式中,以丰富视图的吸引力可用性。 API参考中探索Angular的内置管道库。

6.3K20

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

组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取保存,让组件只需要关注展示 c....声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 的注入点 ngOnInit 中调用service获取数据 a....Angular 的最佳实践之一就是一个独立的顶级模块中加载配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K00

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

组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取保存,让组件只需要关注展示 c....声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 的注入点 ngOnInit 中调用service获取数据 a....Angular 的最佳实践之一就是一个独立的顶级模块中加载配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K50
领券