开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在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

相关搜索:$.ajaxPreFilter()的Angular JS等价物是什么 Angular 6:在*ngFor-dynamically-generated-template-elements上使事件具有同等的动态性在FormGroup中使用数组的Angular ngFor 对于Angular，location.replace()的等价物是什么无法在angular组件中获取ngFor的对象在Angular中使用Mat表中的NgFor angular 8中ng-attr风格的等价物是什么？在angular.js中，jquery的$('#xxl')选择器的等价物是什么 I()等价物(在R中使用)，Python的等价物是什么？在Angular2中的ngfor中设置属性是否可以在angular的选择标签中使用ngFor？ng-在Angular中的等价物列表？在jQuery中eval()的等价物是什么？在Pandas中，LISTAGG的等价物是什么？在Oracle中，@@Error的等价物是什么在map中，`mapNotNull`的等价物是什么？Angular 2中$scope和$scope.watchcollection的等价物是什么？使用ngFor迭代在angular中为空的嵌套对象在OSX swift中webviewdidfinishload的等价物是什么？Javascript .map在vb中的等价物是什么？

相关搜索:

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

有帮助

没帮助

相关·内容

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

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

3.8K2 0

AngularDart 4.0 高级-结构指令顶

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

16.1K2 0

Angular 6.x 指令快速入门

（图片来源于网络）第一节 - 创建指令在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。...>Hello, Angular `, }) export class AppComponent { } 第三节 - 事件处理在 Angular 中，我们可以使用 HostListener...在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图... 解析的过程如下： ngFor + (of -> Of) -> ngForOf ngFor + (trackBy -> TrackBy) -> ngForTrackBy...let item 和 index as i 会被转换为 let-item 和 let-i="index" ngFor 指令在列表上循环，每个循环中都会设置和重置它自己上下文对象上的属性。

3.2K4 0

Angular2 之结构型指令几个概念

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

3K2 0

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.1K2 0

AngularDart4.0 指南- 显示数据顶

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

5.3K1 0

Angular 6.x 基础教程

答案是在项目根目录下的 angular.json 文件中，已经默认帮我们配置了默认的前缀，具体如下： "angular6-fundamentals": { "root": "",...)">点击当 Angular 在调用我们的事件处理函数时，会自动帮我们处理调用的参数。...指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。... 除了 *ngFor 外，常用的结构指令还有 *ngIf、*ngSwitchCase 指令。...第十节 - 组件样式在 Angular 中，我们可以在设置组件元数据时通过 styles 或 styleUrls 属性，来设置组件的内联样式和外联样式。

15.6K2 0

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.4K2 0

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过 NgFor 显示数组型属性通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...以下代码基于 Angular 2 TypeScript 环境配置来创建，你可以在该章节上下载源码，并修改以下提到的几个文件。..., template: ` {{title}} 我喜欢的网站: {{mySite}} ` }) export class AppComponent...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值，并显示在浏览器中，显示信息如下：使用 ngFor...({ selector: 'my-app', template: ` {{title}} 我喜欢的网站: {{mySite}}

2.4K2 0

Angular 自定义管道

本文将使用 UltimateAngular/angular-pro-src 中的示例，来一步步介绍自定义管道的相关知识。...要实现此功能，我们可以利用 Angular 的管道。...在 Angular 中自定义管道，需要按照以下步骤：使用 @Pipe 装饰器定义 Pipe 的 Metadata 信息，如 Pipe 的名称 —— name 属性。...其实，要实现上述的功能，除了在页面模板中使用管道之外，我们也可以在页面渲染前，对数据源进行处理。...，也可以直接浏览线上的示例 —— angular-filesize-pipe。

1.5K2 0

Angular核心概念：数据绑定

Angular核心概念：数据绑定博客首页：蔚说的博客欢迎关注点赞收藏⭐️留言作者水平很有限，如果发现错误，求告知，多谢！有问题可私信交流！！！...循环绑定：ngFor … 举例： html文件此处是未成年的宝宝看的... > 当前的用户绑定{{uname}} ts文件改变值打印在控制台上 uname="dingding";

3.5K1 0

Angular 6.x 表单快速入门

Angular 中有两种表单： Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 Template...第一节 - 创建最简单的输入框如何实现双向绑定？在 Angular 表单中，我们通过 ngModel 指令来实现双向绑定。...在 Angular 中，我们可以使用熟悉的标签来创建表单。...ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。...在 Angular 中表单控件有以下状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。

4.6K2 0

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.5K3 0

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

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

15.3K3 0

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.7K3 0

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

示例代码import { Component } from '@angular/core';@Component({ selector: 'app-root', template: ` <li *ngFor="let item of...应该通过服务、事件发射器或共享状态管理来实现组件间的通信。性能问题undefined过度使用ngFor和ngIf可能导致不必要的渲染。优化这些指令的使用，例如，使用TrackBy函数减少重复渲染。

1461 0

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 这里有必要介绍一下，这个类比的话就喝vue的template

2.5K3 0

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

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

30K2 0

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

示例代码 import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `...'; } } 模板 Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式，使用插值表达式、属性绑定、事件绑定等语法糖。...服务可以通过依赖注入系统在整个应用中共享和复用。.../data.service'; @Component({ selector: 'app-root', template: ` <li *ngFor="let item...应该通过服务、事件发射器或共享状态管理来实现组件间的通信。性能问题过度使用ngFor和ngIf可能导致不必要的渲染。优化这些指令的使用，例如，使用TrackBy函数减少重复渲染。

1851 0

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.8K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭