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

在Angular 2中<template *ngFor的等价物是什么?

在Angular 2中,<template *ngFor的等价物是ng-container。

ng-container是一个逻辑容器,它可以用来包裹多个元素,而不会在DOM中创建额外的节点。在使用*ngFor指令时,ng-container可以作为一个包裹器,用来循环渲染多个元素,而不需要额外的HTML标签。

ng-container的优势在于它不会引入多余的DOM节点,从而减少了页面的复杂性和渲染的开销。它可以提高性能并改善代码的可读性。

ng-container的应用场景包括但不限于:

  • 在使用*ngFor指令时,用于循环渲染多个元素。
  • 在使用*ngIf指令时,用于条件渲染元素。
  • 在模板中需要使用结构指令(如ngFor、ngIf)但不需要实际渲染元素时,可以使用ng-container作为占位符。

腾讯云相关产品中,与Angular 2相关的产品是腾讯云云开发(Tencent Cloud CloudBase)。 腾讯云云开发是一款集成了云函数、云数据库、云存储等多种服务的云端一体化开发平台,可以帮助开发者快速构建和部署应用。通过腾讯云云开发,开发者可以方便地进行前端开发、后端开发、数据库操作等,提高开发效率。

更多关于腾讯云云开发的信息,请访问腾讯云官方网站: https://cloud.tencent.com/product/tcb

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

相关·内容

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

Angular 中,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 本文中,你将学到关于 Angular 结构指令模式知识点。...你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么Angular 结构指令是能够更改 DOM 结构指令。... Angular 中,有三种标准结构化指令。...比如: {{worker.name}} Angular 结构指令是怎么工作

3.8K20

AngularDart 4.0 高级-结构指令 顶

三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 模板语法指南中进行了描述,并在整个Angular文档中示例中进行了介绍。...Angular实际渲染过程中消耗了内容,并用诊断注释替换了。 NgFor和NgSwitch ...指令遵循相同模式。...您可以分配给ngFor字符串中启用这些功能,这是您在Angularmicrosyntax中编写。...满足Angular模板中类似需求。 编写一个结构指令 本节中,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件为true时显示模板内容。...没有合适宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

Angular2 之 结构型指令几个概念

隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。 它仍然附加子啊它所属于DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定变更。...标签 结构型指令,比如ngIf,使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示,模板级别使用。...Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段中。... Hooray! 这时候显示内容是'Hip! Hooray!',Angular控制下,DOM效果是不同。 ?...要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

3K20

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中控件绑定到Angular组件属性来显示数据。 在这个页面中,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地列表下方显示一条消息。...当这些属性改变时,Angular会更新显示。 更准确地说,重新显示是与视图相关某种异步事件之后发生,例如按键,计时器完成或对HTTP请求响应。...元素中* ngForAngular“repeater”指令。...Angular使用该变量作为双曲花括号内插上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。...模板中使用任何Angular指令之前,您需要将它们列组件@Component注解指令参数中。

5.3K10

Angular 6.x 快速入门

基础知识 定义组件元信息 Angular 中,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件...name = 'Angular'; } 定义数据接口 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...Angular 实际项目中,最常用指令是 ngIf 和 ngFor 指令。... ngFor 指令简介 该指令用于基于可迭代对象中每一项创建相应模板。它与 AngularJS 1.x 中 ng-repeat 指令功能是等价。...2.x', 'Angular 4.x', 'Angular 6.x']; } } 第五节 - 事件绑定 Angular 中,我们可以通过 (eventName) 语法,实现事件绑定。

14.1K20

AngularDart 4.0 高级-管道 顶

这是该组件模板: lib/src/hero_birthday2_component.dart (template) template: ''' The hero's birthday is...管道和变化检测 Angular通过每个DOM事件之后运行更改检测过程查找数据绑定值更改:每次击键,鼠标移动,计时器滴答和服务器响应。 这可能是昂贵Angular努力尽可能降低成本并适当。...飞行英雄管道 将一个FlyingHeroesPipe添加到*ngFor迭代器,该迭代器将英雄列表过滤到只能飞行英雄。...Angular中没有等价物。 这不是一个疏忽。 Angular不提供这样管道,因为它们表现不佳,并且避免操控性变弱。 filter和orderBy都需要引用对象属性参数。...本页面的前面,您了解到这些管道必须是不纯,并且Angular几乎每个变更检测周期都会调用不纯管道。 过滤和特殊分类是昂贵操作。

6.3K20

ng-content 中隐藏内容

如果你尝试 Angular 中编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于它文章,进而实现了所需功能。...我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器中添加 ngIf 指令: import { Component } from '@angular/core';...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...The solution 为了让包装器能够控制其子元素实例化,我们可以通过两种方式完成:我们内容周围使用 元素,或者使用带有 “*” 语法结构指令。...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

2.7K30

Angular DOM 抽象概述

element"); } })(); 针对以上应用场景,Angular 为我们开发者提供了 元素, Angular 内部它主要应用在结构指令中...ViewRef ViewRef 是一种抽象类型,用于表示 Angular 视图。 Angular 中,视图是构建应用程序 UI 界面基础构建块。...初学者,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons...对于列表中声明每个组件,Angular 将会创建对应一个 ComponentFactory 对象,并将其存储 ComponentFactoryResolver 对象中。...浏览器环境中,虽然通过 ElementRef nativeElement 属性,我们可以方便地获取对应 DOM 元素,但我们最好不要利用 DOM API 进行 DOM 操作,最好通过 Angular

3.5K30

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

显示数据 Angular 中最典型数据显示方式,就是把 HTML 模板中控件绑定到 Angular 组件属性。...angular提供两种地方存放组件模板 你可以使用 template 属性把它定义为内联, 或者把模板定义一个独立 HTML 文件中, 再通过 @Component 装饰器中 templateUrl...*ngForAngular “迭代”指令。... 多数情况下,插值表达式是更方便备选项。 实际上,渲染视图之前,Angular 把这些插值表达式翻译成相应属性绑定。... Angular 销毁指令/组件之前调用 OnInit钩子 使用 ngOnInit() 有两个原因: 构造函数之后马上执行复杂初始化逻辑 Angular 设置完输入属性之后,对该组件进行准备

15.2K30

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...,但是angular中我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...app.modules.ts中引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据双向绑定 import...需要使用数据绑定组件进行数据处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...isShow">我是一个div块 运行效果 true显示: false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vuetemplate

2.5K30

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

分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表中每个英雄创建一组新元素和绑定。 “结构指令”指南中了解微语法。...*ngFor和trackBy NgFor指令可能表现不佳,特别是大型列表中。 对一个项目,删除项目或添加项目的小改动可以触发DOM操作级联。...大多数情况下,Angular将引用变量值设置为声明元素。...heroForm是什么? heroForm是一个Angular NgForm指令引用,可以跟踪表单中每个控件值和有效性。 原生元素没有form属性。

29.9K20

Angular: 最佳实践

Note: 本文中,我将尽量避免官方 Angular Style Guide 提及模式和有用实践,而是专注我自己经验得出东西,我将用例子来说明。...类型规范 Typing 我们主要是用 TypeScript 去编写 Angular(也许你只是用 JavaScript 或者谷歌 Dart 语言去写),Angular 被称为 TYPEScript 也是有原因...应用程序 tsconfig.json 文件中,我们可以设置这个标志,告诉编辑器未明确类型时候抛出错误。否则,编辑器坚定它无法推断变量类型,而认为是 any 类型。...如果在你 Angular 组件中有个表单,你可能有像这样字段或者方法: @Component({ selector: 'component-with-form', template: `.....小经验:当我们带有子元素 HTML 元素上编写 ngFor 指令时,请考虑将该元素分离为单独组件,就像下面: <div *ngFor="let user

2.8K40
领券