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

angular "*ngIf“not "*ngFor”不工作吗?

在Angular中,"ngIf"和"ngFor"是两个常用的结构指令,用于控制DOM元素的显示和循环渲染。它们的使用方式和作用是不同的。

"*ngIf"是一个条件指令,用于根据给定的条件来决定是否渲染DOM元素。当条件为真时,元素会被渲染出来;当条件为假时,元素会被从DOM中移除。这个指令通常用于根据条件来显示或隐藏某个元素,比如根据用户登录状态来显示不同的内容。

"*ngFor"是一个循环指令,用于根据给定的数据集合来循环渲染DOM元素。它会遍历数据集合中的每个元素,并为每个元素生成一个对应的DOM元素。这个指令通常用于展示列表或表格等需要循环渲染的场景。

对于问题中的情况,如果你想根据某个条件来控制循环渲染的情况,可以使用"ngIf"来包裹整个"ngFor"指令。例如:

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

在上述代码中,当条件"condition"为真时,才会执行"*ngFor"指令进行循环渲染。

需要注意的是,"ngIf"和"ngFor"是两个独立的指令,它们之间没有直接的关联。因此,无论是使用"ngIf"还是"ngFor",都需要确保条件或数据集合的正确性,以及正确的语法和使用方式。

关于Angular的更多信息和相关的腾讯云产品,你可以参考腾讯云官方文档中的Angular开发指南:Angular开发指南

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

三种常见的内置结构指令 - NgIfNgFor和NgSwitch ... - 在模板语法指南中进行了描述,并在整个Angular文档中的示例中进行了介绍。...但它确实解释了它们是如何工作的以及如何编写自己的结构指示。 指令拼写 在本指南中,您将看到UpperCamelCase和lowerCamelCase拼写的指令。 你已经看到了NgIfngIf。...NgIfNgFor应该先走哪一个? NgIf能否取消NgFor的效果? 如果是这样(并且看起来应该如此),Angular应该如何概括取消其他结构指令的能力? 这些问题没有简单的答案。...虽然很少有理由在模板属性或元素形式中应用结构指令,但了解Angular创建并了解它的工作原理仍然很重要。 当你编写自己的结构指令时,你会参考。...Angular将星号(*)语法解析为。 NgIfNgFor和NgSwitch内置指令如何工作。 关于扩展成的微语法。

16.1K20
  • Angular2 之 结构型指令几个概念

    我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIfNgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。... 移除元素组件 利 把ngIf设置为false,将会影响到组件的资源消耗。angular会从DOM中移除该元素,停止相关组件的变更检测,把它从DOM事件中移除,并且销毁组件。...当ngIf重新变成true的时候,angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。...它简化了ngIfngFor —— 无论是写还是读。 ngIf 接下来这两个ngIf范例的效果完全相同,只是我们写成了另一种风格: <!...ngFor Angular把*ngFor转换成一个类似的形式: <!

    3K20

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

    如果您的结构匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口来保持运行。...与您在第1部分中所做的相似,添加所有:CORE_DIRECTIVES: CORE_DIRECTIVES = const [NgClass, NgFor, NgIf, NgTemplateOutlet,...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIfngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方时,很难在列表中识别选定的英雄。...您了解了如何在组件模板中使用核心指令ngIfngFor。 您在CSS文件中定义了样式,并使用它们来设置应用程序的样式。 你的应用应该看起来像这个实例(查看源代码)。...在下一页中,您将将应用程序拆分为子组件,并使它们一起工作

    3K30

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量,用于验证NgFor...-- 默认的是没有key的,这里需要key的地方需要给index重新赋值, --> {{item.title}}...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility

    2.5K30

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

    Angular应该能够捕获组件的数据属性,并使用[(ngModel)]语法将其设置为一个声明: [(ngModel)]是你需要的...例如,TypeScript Angular程序通常具有诸如* ngIf =“currentHero”的代码,其中Dart程序具有诸如* ngIf =“currentHero!...警惕隐藏大型组件树; NgIf可能是更安全的选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用的。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法 分配给* ngFor的字符串不是模板表达式。 这是一种微语法 - Angular解释的一种小语言。

    30K20

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

    它放在其它地方可以?此外,它上面为什么会放个this.cd.detectChanges()?...angular的脏检测机制是基于一定条件和时间的,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果的,所以在此之前调用手动检测方法...问题二:为什么用[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者是会移除。...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...ts中把initSwiper方法相关内容移除: import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular

    1.4K20

    Angular 2 数据显示

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

    2.4K20
    领券