开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我使用*ngFor (角度4)时，它不会渲染

当您使用*ngFor (角度4)时，它不会渲染的可能原因有以下几种：

数据源为空：首先要确保您提供给ngFor指令的数据源不为空。如果数据源为空，ngFor指令将无法迭代任何元素进行渲染。您可以通过在组件中初始化一个非空的数据源来解决此问题。
数据绑定错误：请确保您正确地将数据源绑定到ngFor指令。您可以通过检查数据源是否正确地传递给ngFor指令来解决此问题。
循环变量错误：在ngFor指令中，您需要指定一个循环变量来迭代数据源中的每个元素。请确保您在ngFor指令中正确地指定了循环变量，并在模板中使用它。
错误的模板结构：请确保您正确地在模板中使用ngFor指令。ngFor指令应该用于一个包含多个元素的父元素上，而不是单个元素上。如果您的模板结构不正确，*ngFor指令将无法正常工作。

如果您遇到*ngFor指令不渲染的问题，您可以按照以下步骤进行排查和解决：

检查数据源是否为空。
检查数据绑定是否正确。
检查循环变量是否正确。
检查模板结构是否正确。

如果以上步骤都没有解决问题，您可以尝试在相关的开发社区或论坛上寻求帮助，或者查阅相关的文档和教程来获取更多的支持和解决方案。

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

腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：可靠、可扩展的云数据库服务，适用于各种规模的应用。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：安全、稳定、高扩展性的云端存储服务，适用于图片、音视频、文档等各种类型的数据存储。详情请参考：https://cloud.tencent.com/product/cos

相关搜索:如何在angular 4中使用ngFor动态渲染svg 当我发布到Netlify时，Hugo不会渲染前置事件变量当我使用异步管道时，*ngFor和*ngForOf不工作当我使用*ngFor时，如何保存单选按钮点击？在角度2中使用*ngFor时，复选框不会在负载上应用检查当我使用angular 9 ngFor时，数组不显示相应的数据 Pandas:当我尝试使用pip安装它时出错 javascript当我尝试使用数组时，它显示undefined 当我同步时，p4不会注册我的文件更改使用AOT构建时，角度材质标签不会浮动注意，当我使用反向方法时，不会删除项目在useState中渲染，但当我推送到相同的useState时，它不会我需要Home组件，每当我从折叠器中单击它时都会重新渲染它[react native]有时，当我反序列化它时，它不会加载ArrayList java 使用角度验证时，单击提交按钮时不会显示错误消息当我为函数命名并从控制台触发它时，它可以完美地工作，但是当我向它添加window.onload =时，它永远不会启动当我使用nuxt时，如何修复safari上的渲染问题？当我使用where时，Firestore不会检索我的数据当我在函数中使用它时，状态不会更新使用Alamofire和SwiftyJSON，当我使用json["email"]时，它返回null？

相关搜索:

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

有帮助

没帮助

相关·内容

当我们谈VR时，一定不会错过它

据调查，在今年3月的其中1周时间内，VR市场所获得的投资额高达11亿美金，这比VR市场在15年全年所获得投资额还要高。...虚拟现实(VR)其实是将人带入一个构建出来的虚拟环境中，不管用户在体验VR时会选择哪种设备或者形式，它强调的都是沉浸感。在这样的前提下，内容价值才是虚拟现实的核心价值。...为了让用户在使用产品时更为便捷，暴风魔镜专门开发了可以智能锁屏的暴风魔镜蓝牙无线遥控器，而且这款遥控器是有Android和IOS两个版本的。...全面升级播放内核、调整播放画面结构、新增内容推荐频道、新增高清直播影院、历史直播可回放、3D视觉、4K全景等，暴风魔镜APP可谓是一网打尽了这些功能，成功将暴风魔镜带进了VR新时代。

3614 0

Angular ng-template vs ng-container

通常情况下，当我们使用结构指令时，我们需要添加额外的标签来封装内容，如使用 *ngIf 指令： Div one </...*ngIf 或 *ngFor 指令，比如：中的内容不会显示。...> 模板指令，模板内的内容如果不进行处理，是不会在页面中显示的。...：是一个逻辑容器，可用于对节点进行分组，它将被渲染为 HTML中的 comment 元素，它可用于避免添加额外的元素来使用结构指令。

2.1K2 0

Angular2 之结构型指令几个概念

隐藏元素的利弊当我们隐藏元素时，组件的行为还在继续。它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。...这只是它的默认行为。自定义指令我们自顶一个类似ngIf的指令。...*/ @Directive({ selector: '[myUnless]' }) export class UnlessDirective { /** * 我们需要访问模板，并且还需要一个渲染器来渲染它的内容...渲染器是ViewContainerRef。 * 我们把它们都作为私有变量注入到构造函数中。...要么显示的包含在Template标签中，要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

3K2 0

AngularDart 4.0 高级-结构指令顶

Angular在实际渲染过程中消耗了内容，并用诊断注释替换了。 NgFor和NgSwitch ...指令遵循相同的模式。...当你编写自己的结构指令时，可以使用这些微观语法机制。研究NgIf和NgFor的源代码是了解更多信息的好方法。模板输入变量模板输入变量是一个变量，其值可以在模板的单个实例中引用。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase的值与switch的值匹配时，会显示它的宿主元素。...[template] 它正确渲染。注意使用NgIf的脱糖形式。 ? 现在有条件地用排除一个选项。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号（*）语法解析为。 NgIf，NgFor和NgSwitch内置指令如何工作。

16.1K2 0

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

*ngIf - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版） *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图下面是一个结构化指令的例子。...*ngFor 指令我们使用 *ngFor 指令来遍历数组。...implements OnInit { workers: any = [ 'worker 1', 'worker 2', 'worker 3', 'worker 4'...我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。...最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。总结结构指令是 Angular 中很重要的一部分，我们可以通过多种方式使用它们。

3.8K2 0

C++核心准则Con.4:如果一个对象在构建之后值不会改变，使用const定义它

Con.4: Use const to define objects with values that do not change after construction Con.4:如果一个对象在构建之后值不会改变...，使用const定义它 Reason（原因） Prevent surprises from unexpectedly changed object values....标记不会被修改的非常量。...原文链接 https://github.com/isocpp/CppCoreGuidelines/blob/master/CppCoreGuidelines.md#con4-use-const-to-define-objects-with-values-that-do-not-change-after-construction

5531 0

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

-- each hero goes here --> 下一步你将添加英雄名字使用ngFor指令罗列英雄目标是将组件中的英雄列表绑定到模板，迭代它们，并单独显示它们。...它表示元素及其子元素构成一个主模板。 ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。...; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; } 将样式分配给组件时，它们的作用域为该特定组件。...为了让选定的英雄更清晰可见，当用户点击英雄名字时，你将把这个选定的class应用到。例如，当用户点击“Magneta”时，它应该用一个独特但微妙的背景颜色渲染，如下所示： ?...您了解了如何在组件模板中使用核心指令ngIf和ngFor。您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。你的应用应该看起来像这个实例（查看源代码）。

3K3 0

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

并把它设置为组件的 isUnchanged 属性的当前值,但你的直觉是错的！isUnchanged为true时，button增加disabled属性。...下例中，当 currentHero 为空时，保护视图渲染器，让它免于失败。 The current hero's name is {{currentHero?....name}} 当绑定中 title 属性为空，仍然会继续渲染非空断言操作符（!）在 TypeScript 2.0 中，你可以使用 --strictNullChecks 标志强制开启严格空值检查。...name}} 与安全导航操作符不同的是，非空断言操作符不会防止出现 null 或 undefined。...{{minor}} Change log: {{change}

15.3K3 0

Angular: 最佳实践

我们应该为我们数据添加类型限定，下面有些有用的知识点：使用类型联合和交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据的时非常有用。...当你重复使用同一份 UI 并再次使用现有的数据时，这可能派上用场，并且是关注点分离的一个很好的例子。...小经验：当我们在带有子元素的 HTML 元素上编写 ngFor 指令时，请考虑将该元素分离为单独的组件，就像下面： <div *ngFor="let user...当然，国家不会每天都会发生变更，所以最好的做法就是拉取该数据并缓存，然后在应用程序的生命周期内使用缓存的版本，而不是每次都去调用 API 请求该数据。...模版 Templates Angular 是使用 html 模版（当然，还有组件、指令和管道）去渲染你应用程序中的视图，所以编写模版是不可避免的事情，并且要保持模版的整洁和易于理解是很重要的。

2.8K4 0

ng-content 中隐藏的内容

The explanation 不会 “产生” 内容，它只是投影现有的内容。...你可以认为它等价于 node.appendChild(el)或 jQuery 中的 $(node).append(el) 方法：使用这些方法，节点不被克隆，它被简单地移动到它的新位置。...ng-template> 包装器不再使用，因为它接收到一个模板。...我们需要使用 @ContentChild 访问模板，并使用ngTemplateOutlet 来显示它： @Component({ selector: 'wrapper', template: `...class Wrapper { show = true; @ContentChild(TemplateRef) template: TemplateRef; } 现在我们的 counter 组件，每当我们隐藏并重新显示时都正确递增

2.7K3 0

Angular 从入坑到挖坑 - 组件食用指南

指令上下文中的 index 属性在每次迭代中，会获取到条数据的索引值当渲染的数据发生改变时 4，会导致 dom 元素的重新渲染，此时可以采用 trackBy 的方式，通过在组件中添加一个方法，指定循环需要跟踪的属性值...，此时当渲染的数据发生改变时，只会重新渲染变更了指定的属性值的数据不使用 trackBy 跟踪属性 <p *ngFor="let item of products; let...NgSwitch 本身是一个属性型指令，它不会直接操作 dom 元素，而是通过它所控制的两个结构型指令（NgSwitchCase、ngSwitchDefault）来操作 dom 元素 4.3、管道在使用模板表达式绑定数据时...安全导航运算符在视图中使用的属性值为 null or undefined 时，javascript 和 angular 会引发空指针异常并中断视图的渲染过程，从而视图会渲染失败，而使用了安全导航运算符...name}} 非空断言运算符不会防止出现 null 或 undefined，只是不提示 4.3.2、常用的管道函数纯管道只有在它检测到输入值发生了纯变更时才会执行，但是会忽略对象内部的变更

15.8K3 0

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

事件发生时，处理程序执行模板语句。模板语句通常包含一个接收器，它响应事件执行一个动作，例如将HTML控件的值存储到模型中。...Dart 2.0注意：检查模式不会在飞镖2.0。有关更多信息，请参阅Dart 2.0更新。显示/隐藏不是一回事您可以使用类或样式绑定来控制元素的可见性： <!...当NgIf为false时，Angular从DOM中删除元素及其后代。它摧毁了他们的组件，潜在地释放了大量的资源，从而带来了更加快速的用户体验。展示/隐藏技术适合少数几个后代的元素。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。您可以捕获模板输入变量中的index，并在模板中使用它。...下一个示例捕获名为i的变量中的索引，并使用像这样的英雄名称来显示它。

30K2 0

Angular 6.x 快速入门

ngFor 指令语法 ...... ngIf 与 ngFor 指令使用示例 import { Component } from '@angular/core'; interface Address { province...get() 方法，设置请求地址并发送 HTTP 请求； (4) 把请求的结果，赋值给对应的属性。...routerLink 指令，具体示例如下：首页我的当我们点击以上的任意链接时...，页面不会被重新加载。

14.1K2 0

Angular动态创建元素的一些坑

在html文件中用ngFor 动态生成子html 元素的自定义属性，比如data-title ，发现angular报错，不让用。解决办法：采用 attr.自定义属性名即可 ?...实现拖拽功能需要复制html元素 append到其他元素时希望将原始html标签上的 (click) 事件属性也一起复制，发现angular会自动将(click) 删除，无奈需要在ts里动态添加click...或者直接对对象的onclick属性绑定方法，此种做法可以使用父级this上的方法 ?...angular在页面渲染时会为html元素自动增加属性 _ngcontent-c[数字] ，angular的某些class样式和这类属性密切耦合影响页面样式；而在ts代码中动态复制html标签时该属性还没有生成...，动态复制的html元素不会被再次渲染生成 _ngcontent-c[数字] 属性，因此复制的html与原始的html样式无法一致。

2.5K2 0

前端框架与库 - Angular基础：组件、模板、服务

它基于 TypeScript，提供了丰富的功能，包括组件化架构、数据绑定、依赖注入等。...= 'World'; changeName() { this.name = 'Angular'; }}模板Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式，使用插值表达式.../data.service';@Component({ selector: 'app-root', template: ` <li *ngFor="let item of...性能问题undefined过度使用ngFor和ngIf可能导致不必要的渲染。优化这些指令的使用，例如，使用TrackBy函数减少重复渲染。...如何避免这些问题使用事件发射器undefined在父子组件之间使用事件发射器进行通信，避免直接访问。性能优化undefined对于大型列表，使用虚拟滚动技术来提高性能。

1461 0

Angular 显示英雄列表

当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。浏览器刷新之后，英雄列表出现了。...heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。...添加 click 事件处理器把该组件的 hero 属性改名为 selectedHero，但不要为它赋值。因为应用刚刚启动时并没有所选英雄。...修复 - 使用 *ngIf 来隐藏空白的细节该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。把显示英雄详情的 HTML 包裹在一个中。...你使用 *ngFor 显示了一个列表。你使用 *ngIf 来根据条件包含或排除了一段 HTML。你可以用 class 绑定来切换 CSS 的样式类。

4.4K7 0

Angular 6.x 基础教程

value) { console.log(value); } ngOnInit() {} } 需要注意的是，若我们改变绑定的表达式为 (click)="onClick(myInput)" ，当我们点击按钮时...onClick(event, value) { console.log(event); console.log(value); } ngOnInit() {} } 成功运行以上代码，当我们点击按钮时...ngFor 指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...使用 ngFor 指令更新 MailService 服务 import { Injectable } from '@angular/core'; @Injectable() export class...用过 AngularJS 1.x 的同学，对 ng-class 应该很熟悉，通过它我们能够根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 ngClass 。

15.6K2 0

AngularDart4.0 指南- 显示数据顶

当您使用AppComponent类（在web / main.dart中）引导时，Angular将在index.html中查找，查找它，实例化AppComponent...您可以使用模板属性内联定义它，也可以使用组件元数据@Component注解的templateUrl属性链接到单独定义模板的HTML文件。...Angular使用该变量作为双曲花括号内插的上下文。在这种情况下，ngFor正在显示一个列表，但ngFor可以为任何Iterable对象重复项目。...当组件的英雄列表中有三个以上的项目时，Angular会将该段落添加到DOM，并显示消息。如果有三个或更少的项目，Angular会忽略该段落，所以不会显示任何消息。...概要现在你知道如何使用：用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类，用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K1 0

AngularDart 4.0 高级-生命周期钩子顶

Angular创建它，渲染它，创建和渲染它的子项，在数据绑定属性发生变化时对其进行检查，并在将它从DOM中删除之前对其进行销毁。...SpyDirective可以使用ngOnInit和ngOnDestroy挂钩创建或销毁它探测的元素。...刺探OnInit和OnDestroy 使用这两个间谍钩进行卧底探索，以发现元素何时被初始化或销毁。这是指令的完美渗透工作。英雄们永远不会知道他们正在被监视。...英雄对象引用没有改变，所以从Angular的角度来看，没有改变的反馈！ DoCheck 使用DoCheck钩子来检测并处理Angular自己无法捕获的更改。...-- AfterContent Logs -- Reset <div *ngFor="let

6.2K1 0

过渡到 Angular 17 的新控制流语法

} *ngFor指令 vs @for控制块Before（传统 *ngFor）： {{ item }}</ul...使用自动迁移：使用 Angular v17 CLI 的迁移命令。ng g @angular/core:control-flow或者更好的方式是分步进行。...手动细化：手动优化复杂模板，以最佳方式使用新语法。例如，在某些情况下，您可以使用 @defer 块来延迟加载内容。向后兼容性和性能Angular 17允许您在应用程序中同时使用新旧语法。...就性能而言，值得一提的是，Angular团队观察到使用新语法时达到了高达90%的速度性能改进。...结论Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法，承诺会使我们的代码更易读、易维护和高性能。

6702 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭