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

如何在Angular 7中为每个for..loop元素创建不同引用

在Angular 7中,可以使用ngFor指令来循环遍历一个数组或对象,并为每个循环元素创建不同的引用。以下是实现这一目标的步骤:

  1. 首先,在组件的模板文件中,使用ngFor指令来循环遍历一个数组或对象。例如,假设我们有一个名为items的数组,可以这样使用ngFor指令:
代码语言:txt
复制
<div *ngFor="let item of items; let i = index">
  <!-- 在这里放置循环元素的内容 -->
</div>
  1. 接下来,为每个循环元素创建不同的引用,可以使用ngTemplateOutlet指令和ngTemplateContext指令。首先,在模板文件中定义一个模板,并使用ngTemplateOutletContext指令将当前循环元素绑定到模板上下文中。例如:
代码语言:txt
复制
<ng-template #itemTemplate let-item>
  <!-- 在这里放置循环元素的内容 -->
</ng-template>
  1. 然后,在ngFor指令中使用ngTemplateOutlet指令来引用上面定义的模板,并使用ngTemplateOutletContext指令将当前循环元素传递给模板。例如:
代码语言:txt
复制
<div *ngFor="let item of items; let i = index">
  <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
</div>

在上面的代码中,我们使用ng-container元素来包裹ngTemplateOutlet指令,以确保不会在DOM中创建额外的元素。

通过以上步骤,我们就可以在Angular 7中为每个for..loop元素创建不同的引用。这种方法可以用于在循环中创建动态组件、动态样式等场景。

对于Angular 7的更多信息和示例,请参考腾讯云的Angular 7开发文档:Angular 7开发文档

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

相关·内容

JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

Angularjs的优缺点 优点: 创建自定义的文档对象模型(DOM)元素。 简单的UI设计和更改。 在HTML文档中创建输入字段时,将为每个已渲染字段创建单独的数据绑定。...伟大的代码重用(Angular库)。 缺点: 指令API的复杂性。 对于具有许多交互元素的页面,Angular变得缓慢。 原始设计往往很慢。 由于许多DOM元素,性能方面有问题。...但是有很多模块用于路由,react-router,flow-router。 更强大的路由,以牺牲可增加的复杂性代价。 意见 灵活的意见。给出一点灵活性来实现你自己的客户端堆栈。 灵活的意见。...这需要深入了解所考虑的每个框架的优点和缺点,以及它们如何在不同用例下竞争。所有框架都有很多共同点:开源,在许可证下发布,并创建具有MVC设计模式的SPA。它们都有视图,事件,数据模块和路由。...然而,不同的JavaScript框架更适合不同类型的应用程序。 如果你正在决策创建一个web app,对于长期支持和活跃的社区,Angular,React和Ember是最安全的。

12.7K60

Vue相关的前端面试题,每道题都很经典~

问题目录 ①:说说Vue和Angular、ReactJS的相同点和不同点 ②:简单描述一下Vue中的MVVM模型 ③:v-if和v-show指令有什么区别?...答案与详解 Q 说说Vue和Angular、ReactJS的相同点和不同点 与React的相同: ●都使用了Virtual DOM ●提供了响应式和组件化的视图组件 ●将注意力集中保持在核心库,而将其他功能路由和全局状态管理交给相关的库...与Angular的相同: Vue早起的灵感是来源于Angular,所以很多语法是类似的,v-if和ng-if。...Q 简单描述一下Vue中的MVVM模型 Vue是以数据驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。...因为在一个组件被多次引用的情况下,如果data的值是一个Object的话,那么由于Object是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了

11K30

AngularDart4.0 指南-体系结构概述 顶

主要的Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要的库,angular.security...模板是一种HTML形式,告诉Angular如何呈现组件。 模板看起来像普通的HTML,除了一些不同之处。...= null" [hero]="selectedHero"> 虽然这个模板使用了典型的HTML元素和,但它也有一些不同之处。...注意是如何在原生HTML元素中合适的存放。 自定义组件与原生HTML在相同的布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。...用户的更改也会返回到组件,将属性重置最新值,就像事件绑定一样。 Angular每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根到所有子组件。 ?

7.9K30

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

安装后,它会在每个Angular 框架下的WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。...然后打开一个使用WijmoJS 控件的Angular应用程序并尝试启动设计器。 Web在线设计器 此设计器是用于创建和自定义WijmoJS控件的Web应用程序。...Web-based Wijmo Designer 此设计器生成的代码是纯HTML和JavaScript,生成的代码包括初始化控件所需的引用,宿主元素和JavaScript脚本。...WijmoJS 中的Web Components 应用 WijmoJS 的 Web组件互操作的测试版已经推出,它将WijmoJS控件公开Web组件,更具体地说是自定义元素。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。

7K20

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

Angular把这条指令翻译成一个围绕宿主元素的,然后重复使用这个模板列表中的每个英雄创建一组新的元素和绑定。 在“结构指令”指南中了解微语法。...你知道这一点,因为每个英雄的ID没有改变。 但是Angular只能看到新的对象引用列表。 它别无选择,只能拆除旧的DOM元素并插入所有新的DOM元素。...在大多数情况下,Angular引用变量的值设置声明的元素。...heroForm是一个Angular NgForm指令的引用,可以跟踪表单中每个控件的值和有效性。 原生元素没有form属性。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同您在*ngFor中可能看到的那样。 了解“结构指令”指南中的差异。 引用变量的范围是整个模板。

29.9K20

angularJS的DOM操作

'); }]); 二.引用jQuery 引用jQuery的前提下,和$用法基本相同:angular.element(‘#‘).html...三.angular.element方法汇总 addClass()-每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()...-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素...,选择器选择性筛选 clone()-创建一个匹配的元素集合的深度拷贝副本 contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点 css() - 获取匹配元素集合中的第一个元素的样式属性的值...removeAttr()-匹配的元素集合中的每个元素中移除一个属性(attribute) removeClass()-移除集合中每个匹配元素上一个,多个或全部样式 removeData()-在元素上移除绑定的数据

7610

AngularDart4.0 指南- 表单 顶

每个input元素都有一个ngControl指令,Angular表单需要用这个指令在表单上注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...NgForm指令 Angular自动创建并附加一个NgForm指令给标签。 NgForm指令补充表单元素的附加功能。...它包含用ngModel和ngControl指令元素创建的控件,并监视它们的属性,包括它们的有效性。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

17.5K30

Angular源码分析之$compile

$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数...我认为,前端领域的依赖注入,则大大减少了命名空间的使用,著名的YUI框架的命名空间引用方式,在极端情况下对象的引用可能会非常长。而采用注入的方式,则消耗的仅仅是一个局部变量,好处自然可见。...前面废话一大堆,主要还是后面的介绍做铺垫。...随后,在返回的compositeLinkFn中,则是遍历linkFns,针对每个链接函数,创建起对应的作用域对象(针对创建隔离作用域的指令,创建隔离作用域对象,并保存在节点的缓存中),并处理指令是否设置了...“element”时,则会用注释comment替换当前元素节点,再重新编译原先的DOM节点,而如果transclude设置默认的true时,则会继续编译其子节点,并通过transcludeFn传递编译后的

1.5K50

Angular DOM 抽象概述

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...作用 在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境, Web Worker 中,因为在 Web Worker 环境中,是不能操作 DOM。...我们开发者提供了 元素,在 Angular 内部它主要应用在结构指令中,比如 *ngIf、*ngFor 等。...对于列表中声明的每个组件,Angular 将会创建对应的一个 ComponentFactory 对象,并将其存储在 ComponentFactoryResolver 对象中。..._moduleRef.destroy(); } } 总结 本文主要介绍了 Angular 中常见的引用类型, ElementRef、TemplateRef、ViewRef 等。

3.5K30

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

数据创建一个类 使用angular提供的cli: ng generate class hero 修改src/app/hero.ts export class Hero { constructor(...在正常的 HTML 开发过程中,你使用 HTML 元素创建视觉结构, 通过把字符串常量设置到元素的 attribute 来修改那些元素。...然后,用封装了 HTML 的组件创建元素,并把它们当作原生 HTML 元素在模板中使用。 模板引用变量 ( #var ) 模板引用变量通常用来引用模板中的某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component。...3. angular 声明周期钩子 每个组件都有一个被 Angular 管理的生命周期,Angular 提供了生命周期钩子,把这些关键生命时刻暴露出来,你可以做一些自定义操作。

15.2K30

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

快速执行 Angular每个更改检测周期后执行模板表达式。 更改检测周期由许多异步活动触发,承诺的分辨率,http结果,计时器事件,按键和鼠标移动。...但是它也与你习惯的HTML有很大的不同。 它需要一个新的心智模式。 在HTML开发的正常过程中,您可以使用HTML元素创建一个可视结构,并通过使用字符串常量设置元素属性来修改这些元素。...然后,您将学习如何使用封装了HTML的组件创建元素,并将它们放入模板中,就好像它们是原生HTML元素一样。 <!...属性绑定([property]) 编写一个模板属性绑定来设置一个视图元素的属性。 该绑定将该属性设置模板表达式的值。 最常见的属性绑定将元素属性设置组件属性值。... 插值处理脚本标记与属性绑定不同,但两种方法均无害地呈现内容。 ? 属性(Attribute),类和样式绑定 模板语法不太适合属性(property )绑定的场景提供了专门的单向绑定。

5.1K10

前端人员该怎么面试 经典Angular面试题有哪些

Angular 2组件/指令具有生命周期事件,是由@angular/core管理的。@angular/core会创建组件,渲染它,创建并呈现它的后代。...Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀ng的hook方法。...#FormatImgID_0# 2、事件发射器如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...Shadow DOM通过提供了更好的关注分离,通过其它的HTML DOM元素实现了更少的样式与脚本的冲突。...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

4.1K80

【17】进大厂必须掌握的面试题-50个Angular面试

Angular中的摘要周期是监视监视列表的过程,以跟踪监视变量的值的变化。在每个摘要循环中,Angular都会比较范围模型值的先前版本和新版本。...26.我们可以在哪种类型的组件上创建自定义指令? Angular支持创建以下内容的自定义指令: 元素指令 -当遇到匹配的元素时,指令将激活。 属性 -当遇到匹配的属性时,指令将激活。...与单向数据绑定不同,这是一个同步过程。 ## 30.组件和指令的生命周期挂钩是什么? Angular组件具有离散的生命周期,其中包含从出生到死亡过渡的不同阶段。...Karma Angular Mocks Mocha Browserify Sion 38.如何在Angular创建服务?...当Angular找到ng-app指令时,它将加载与其关联的模块,然后编译DOM。 手动引导: 手动引导您提供了有关如何以及何时初始化Angular应用程序的更多控制。

41.2K51

必须要会的 50 个React 面试题(上)

React与Angular有何不同? 主题 React Angular 1. 体系结构 只有 MVC 中的 View 完整的 MVC 2. 渲染 服务器端渲染 客户端渲染 3....每个事件类型都包含自己的属性和行为,只能通过其事件处理程序访问。 23. 如何在React中创建一个事件?...它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。 25. 你对 React 的 refs 有什么了解? Refs 是 React 中引用的简写。...它是一个有助于存储对特定的 React 元素或组件的引用的属性,它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。...如何在 React 中创建表单 React 表单类似于 HTML 表单。但是在 React 中,状态包含在组件的 state 属性中,并且只能通过 setState() 更新。

3.8K21

2018 年前端开发五大趋势

对于开发者而言,2017出奇的高效,不过2018年有望IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年JavaScript的五种主要发展趋势。...第三,Angular创建可扩展应用程序的理想选择,支持与第三方库的简单集成。这个框架经常用于构建动态的移动应用,因为它使用了双向数据绑定,这种方法增加了带有丰富动画元素的应用程序的响应能力。...Gatsby 是 Kyle Matthews 静态网站的创建而构建的新型解决方案。 ? 它如何优于同行?...它拥有几个状态(一个空列表,一个部分填充的列表,列表中所有元素都被填充,列表中仅有一些元素被填充),我们需要适配每个元素的 UI。...即使你可以创建一个通用代码来根据每个状态转换应用程序界面,你仍然需要记录它(否则对其他团队成员而言是很难理解的)。Storybook 如何在这里提供帮助?

2.9K40

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

一、Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间的交互...四、Step by Step 4.1、组件与模板 4.1.1、组件的基础概念 组件包含了一组特定的功能,每个组件的功能都单一且独立,可以进行重复使用;组件可以通过 angular cli 进行创建,生成的组件位于工作空间的...因此,这里应该使用模板引用变量的方式获取数据信息。 模板引用变量是对模板中 DOM 元素引用,提供了从模块中直接访问元素的能力。...="expr">NgIf 结构型指令 当 expr 属性 true 时,这个元素则会显示在页面上,当属性值 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...,当值 false 时,则这些元素会从 dom 中被销毁,并且所有监听该 dom 元素的事件会被取消,当重新显示该元素时,会重新执行初始化的过程 与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的

15.8K30

AngularDart 4.0 高级-结构指令 顶

Angular将这个符号解析成一个围绕宿主元素及其后代的标记。 每个结构指令都与该模板有所不同。...模板输入变量与模板引用变量不同,语义和语法都不同。 您使用let关键字(let hero)声明模板输入变量。 变量的作用域限于重复模板的单个实例。...每个宿主元素一个结构指令 有一天你会想重复一段HTML,但只有当特定条件成立时才会重复。 您将尝试将*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。...{{hero.name}} 如果没有宿主元素,通常可以将内容包装在本机HTML容器元素)中,然后将该指令附加到该容器...如果条件假并且视图尚未创建,请告诉视图容器从模板创建嵌入的视图。 如果条件真并且当前显示视图,则清除且销毁视图的容器。 没有人读取myUnless属性,因此它不需要getter。

16K20

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

; }); 作用域的层级结构: 每个Angular应用都只有一个root作用域,但是可能有多个子作用域; 每个应用有多个作用域,因为一些指令会创建子作用域(refer to directive documentation...在这个例子中,样式定义了红色高亮的区域socpe的区域,子作用域是必须的,因为repeater需要计算{{name}},但是依赖于不同的作用域,最后结果也不同,类似的,计算{{department}}...指令和创建作用域 在大多数情况,指令和作用域交互不创建新的作用域。无论如何,一些指令,像是ng-controller和ng-repeat,创建子作用域并且将子作用域赋予相对应的dom元素上。...作用域$watch深度 脏检查可以基于三种策略完成:引用、集合内容、和值。三种策略侦测变化的类型不同,并且他们的性能也很大的不同。 监测基于引用(scope....这样分割了javascript典型和angular执行上下文。只有操作应用在Angular执行上下文中才会受益于Angular数据绑定,一行处理,属性监测,等。

13.2K20

Angular ElementRef 简介

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。定义了抽象类 Renderer 、抽象类 RootRenderer 等。...下面我们就来分析一下 ElementRef 类: ElementRef 的作用 在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境, web worker 中...通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到...没有抛出异常,我们可以推断 this.elementRef.nativeElement 这个对象是存在,但却找不到它的子元素,那应该是在调用构造函数的时候,my-app 元素下的子元素还未创建。...其实在 Angular 框架内部已经我们提供了解决方案,它为我们提供了内置的装饰器, @ContentChild、 @ContentChildren、@ViewChild、@ViewChildren

1.6K60

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

如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式的知识点。...当表达式是 false 的时候,*ngIf 指令移除 HTML 元素。当 true 时候,元素的副本会添加到 DOM 中。...constructor() { } ngOnInit(): void { } } 怎么使用 *ngSwitch 指令 译者加:这个指令实际开发很有用 我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素...甚至可以使用它们来创建一个之前不存在的新的元素。 最好的规则是:当我们正在考虑操作 DOM 的时候,那么是时候使用结构指令了。...总结 结构指令是 Angular 中很重要的一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文译文,采用意译的形式。

3.8K20
领券