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

运行不带星号前缀的NgFor指令

NgFor指令是Angular框架中的一个内置指令,用于在模板中循环渲染一个集合或数组的元素。它的语法如下:

代码语言:txt
复制
*ngFor="let item of items; let i = index"

其中,items是要循环的集合或数组,item是当前循环的元素,i是当前元素的索引。

NgFor指令的分类是结构型指令,它可以改变DOM的结构。

NgFor指令的优势在于简化了在模板中循环渲染元素的操作,使开发者能够更方便地处理集合或数组数据。

NgFor指令的应用场景包括但不限于:

  1. 渲染列表:可以通过NgFor指令循环渲染一个列表,例如展示商品列表、新闻列表等。
  2. 动态生成表格:可以利用NgFor指令动态生成表格的行和列,根据数据的变化自动更新表格内容。
  3. 多级菜单:可以利用NgFor指令循环渲染多级菜单,实现动态展示和隐藏子菜单。

对于腾讯云的相关产品和产品介绍链接地址,以下是一些推荐的选择:

  1. 云服务器(CVM):提供弹性计算能力,支持多种操作系统,适用于各类应用场景。详细介绍请参考:腾讯云云服务器
  2. 云数据库MySQL版(CDB):提供高可用、可扩展的MySQL数据库服务,支持自动备份、容灾等功能。详细介绍请参考:腾讯云云数据库MySQL版
  3. 云原生容器服务(TKE):提供容器化应用的部署、管理和扩展能力,支持Kubernetes等容器编排工具。详细介绍请参考:腾讯云云原生容器服务

请注意,以上仅为腾讯云的一些产品示例,更多产品和服务可以在腾讯云官网上进行了解和选择。

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

相关·内容

AngularDart 4.0 高级-结构指令

在应用结构指令之前,您可能想暂停一下,以考虑添加和删除元素以及创建和销毁组件后果。 星号(*)前缀 当然,你注意到了指令名称星号(*)前缀,并想知道为什么它是必要以及它做了什么。...NgFor和NgSwitch ...指令遵循相同模式。 *ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号(*)语法通过模板属性到模板元素。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase值与switch值匹配时,会显示它宿主元素。...指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司简短内容。 在这个例子中,前缀是my。...在没有合适宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16.1K20

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

如果您结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口来保持运行。...通过添加核心指令* ngFor修改标签。 ngFor前缀(*)是此语法关键部分。...ngFor指令遍历组件英雄列表并为该列表中每个英雄呈现该模板一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代英雄详情。...这是你在ngFor指令中定义同一个英雄变量。 在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定更多信息。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表中识别选定英雄。

3K30
  • Angular2 之 结构型指令几个概念

    Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。...是这三种指令中最常用,我们会编写大量组件来构建application。 属性型指令 属性型指令会修改元素外观或者行为。 e.g. NgStyle可以修改元素好几个样式。...结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM布局。 我们经常看到内置结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...(*)效果 这个星号是一种“语法糖”。

    3K20

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

    “结构指令”指南介绍了结构指令深入细节,您将在其中学习以下内容: 为什么必须在指令名称前加上前缀星号(*)。 当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。...*ngFor="let hero of heroes" [hero]="hero"> 不要忘记ngFor前面的星号(*)。...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代中项目的从零开始索引。 您可以捕获模板输入变量中index,并在模板中使用它。...不要在同一模板中多次定义相同变量名称。 运行时值将是不可预知。 你可以使用ref-前缀替代#。 本示例将fax变量声明为ref-fax,而不是#fax。

    30K20

    探索基于VSCode远程开发插件,进行远程指令和本地指令运行

    需求 最近在研究VSCode插件时候,使用了VSCode远程开发套件,Remote - SSH可以在本地VSCode上登录远程机器,打开远程机器某个文件夹进行开发。...不用往下看啦 Terminal: Create New Integrated Terminal (local) 插件中使用(只有远程环境下才能运行) let disposable = vscode.commands.registerCommand...: boolean; } 该参数可以设置终端名称,自定义shell执行器路径,执行shell参数,工作目录,环境变量。 最令人在意就是cwd这个参数,工作目录。...这里我存在两个问题, 创建中cwd参数到底支不支持本地机器路径? 如何支持,那路径应该如何写? 目前还没找到答案,我想最终答案肯定是不支持,如果支持这样重要特性,官方一定会在文档中注明。...使用UI插件来运行本地指令文档链接 https://code.visualstudio.com/api/advanced-topics/remote-extensions#known-issues

    37120

    iOS代码运行磨刀石-预编译指令

    iOS中代码运行磨刀石--预编译指令 所谓预编译,就是程序代码在编译之前,开发工具为我们预先做一些工作。不要小瞧这些指令,没有它们,我们代码可能寸步难行。...#include_next "header" #include_next 这两个指令是C中指令,OC也支持,只是很少使用,它作用是在找到名字匹配头文件后跳过,寻找下一个相同名字导入...#define 参数1 参数2 定义一个简单替换宏,不带参数,在预编译阶段,会把所有参数1地方直接替换为参数2。 ...#warning 警告 这个命令并不会影响程序编译和运行,但是会认为在这里显示一条警告信息,提醒我们自己。...#line number 改变当前行行号,会影响下面所有的行 #line number "filename" 改变当前行号和编译后文件名 六、编译器控制指令 #pragma 参数 这个预编译指令是最复杂

    43120

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中v-model效果是一致,只是写法会有一些区别,vue中是可以直接进行使用...,但是在angular中我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility

    2.5K30

    AngularDart4.0 指南- 表单 顶

    您可以在Plunker中运行实例(查看源代码)并从那里下载代码。 模板驱动形式 您可以通过使用本页中描述特定于表单指令和技术在Angular模板语法中编写模板来构建表单。...这个表格中三个字段中两个是必需。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意风格显示验证错误: ?...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...p模板输入变量在每次迭代中是不同power; 您使用插值语法显示其名称。 与ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令在表单上注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?

    17.5K30

    ng-content 中隐藏内容

    在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器中添加 ngIf 指令: import { Component } from '@angular/core';...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...为什么不按照我们预期运行? The explanation 不会 “产生” 内容,它只是投影现有的内容。...性能原因更为重要。因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序工作量。...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

    2.7K30

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

    在 Angular 中,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...*ngIf - 根据表达式返回布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们在指令中设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...指令 我们使用 *ngFor 指令来遍历数组。...比如: {{ wok }} 我们组件 TypeScript 文件: import { Component

    3.8K20
    领券