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

当angular ngFor在DOM中创建元素时,如何执行函数?

当angular ngFor在DOM中创建元素时,可以通过以下几种方式执行函数:

  1. 使用内置的Angular指令:可以在ngFor指令中使用ngOnInit或ngAfterViewInit等生命周期钩子函数来执行特定的函数。这些钩子函数会在每个元素被创建并添加到DOM后被调用。例如:
代码语言:txt
复制
<div *ngFor="let item of items; let i = index" (ngOnInit)="myFunction(item)">
  <!-- 元素内容 -->
</div>
  1. 使用ng-container元素:ng-container是一个逻辑容器,不会在DOM中创建额外的元素。可以在ng-container中使用ngOnInit或ngAfterViewInit等生命周期钩子函数来执行函数。例如:
代码语言:txt
复制
<ng-container *ngFor="let item of items; let i = index" (ngOnInit)="myFunction(item)">
  <div>
    <!-- 元素内容 -->
  </div>
</ng-container>
  1. 使用ngAfterViewChecked钩子函数:ngAfterViewChecked会在每次视图变更检测完成后被调用。可以在组件中实现ngAfterViewChecked钩子函数,并在其中执行函数。例如:
代码语言:txt
复制
import { Component, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngFor="let item of items; let i = index">
      <!-- 元素内容 -->
    </div>
  `
})
export class MyComponent implements AfterViewChecked {
  items: any[] = [];

  ngAfterViewChecked() {
    this.myFunction();
  }

  myFunction() {
    // 执行函数的逻辑
  }
}

以上是几种常见的方式来执行函数,具体选择哪种方式取决于实际需求和场景。对于腾讯云相关产品和产品介绍链接地址,可以根据具体的需求和场景选择适合的产品,例如云函数SCF、云原生容器服务TKE、云数据库CDB等,可以在腾讯云官网上查找相关产品的详细介绍和文档。

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

该指南在谈论其属性以及指令的功能引用了指令类。 指南描述如何将指令应用于HTML模板元素引用了属性(attribute)名称。...条件为false,NgIf从DOM删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...宿主元素连接到资源密集型组件,这很重要。 即使隐藏,这种组件的行为也会继续。 该组件保持连接到其DOM元素。 它一直倾听事件。 Angular不断检查可能会影响数据绑定的更改。...虽然很少有理由模板属性或元素形式应用结构指令,但了解Angular创建并了解它的工作原理仍然很重要。 当你编写自己的结构指令,你会参考。...没有合适的宿主元素使用作为分组元素Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16.1K20

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

模板表达式计算结果为trueAngular会添加类。 表达式为false,它将删除类。 <!...事件发生,处理程序执行模板语句。 模板语句通常包含一个接收器,它响应事件执行一个动作,例如将HTML控件的值存储到模型。...指令没有合适的宿主元素如何元素进行分组。 如何编写自己的结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见的结构指令: NgIf:有条件地从DOM添加或删除元素。...NgIf为falseAngularDOM删除元素及其后代。 它摧毁了他们的组件,潜在地释放了大量的资源,从而带来了更加快速的用户体验。 展示/隐藏技术适合少数几个后代的元素。...NgSwitchCase在其绑定值等于交换机值将其元素添加到DOM没有选择NgSwitchCase,NgSwitchDefault将其元素添加到DOM

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

    隐藏元素的利弊 当我们隐藏元素,组件的行为还在继续。 它仍然附加子啊它所属于的DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定的变更。... 移除元素组件 利 把ngIf设置为false,将会影响到组件的资源消耗。angular会从DOM移除该元素,停止相关组件的变更检测,把它从DOM事件移除,并且销毁组件。...ngIf重新变成true的时候,angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。...总结 基于上面的利弊分析,无论是我们使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。...控制Template标签内DOM添加与显示,模板级别使用的。 Angular应用之外,标签的默认CSS属性display是none 。 它的内容存在于一个隐藏的文档片段

    3K20

    AngularDart4.0 指南- 显示数据 顶

    这些属性改变Angular会更新显示。 更准确地说,重新显示是与视图相关的某种异步事件之后发生的,例如按键,计时器完成或对HTTP请求的响应。... 您使用AppComponent类(web / main.dart)引导Angular将在index.html查找,查找它,实例化AppComponent...元素的* ngForAngular“repeater”指令。...组件的英雄列表中有三个以上的项目Angular会将该段落添加到DOM,并显示消息。 如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。...Angular没有显示和隐藏消息。 它正在添加和删除DOM的段落元素。 这可以提高性能,特别是大型项目中,有条件地包含或排除大量的HTML与许多数据绑定。 试试看。

    5.3K10

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

    Angular ,有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大的特性之一,然而它们却频繁被误解。... Angular ,有三种标准的结构化指令。...表达式是 false 的时候,*ngIf 指令移除 HTML 元素为 true 时候,元素的副本会添加到 DOM 。...条件值是 true 的时候,相关的元素就会被渲染到 DOM ,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素DOM 。...甚至可以使用它们来创建一个之前不存在的新的元素。 最好的规则是:当我们正在考虑操作 DOM 的时候,那么是时候使用结构指令了。

    3.8K20

    Angular 2 架构(下)

    每种形式都有一个方向——从 DOM 来、到 DOM 去、双向,就像图中的箭头所示意的。 插值 : HTML 标签显示组件值。... Angular 渲染它们,它会根据指令对 DOM 进行修改。 指令是一个带有"指令元数据"的类。 TypeScript ,要通过 @Directive 装饰器把元数据附加到类上。...Angular包含以下三种类型的指令: 属性指令:以元素的属性形式来使用的指令。 结构指令:用来改变DOM树的结构 组件:作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令。...注入器是一个维护服务实例的容器,存放着以前创建的实例。 如果容器还没有所请求的服务实例,注入器就会创建一个服务实例,并且添加到容器,然后把这个服务返回给 Angular 。...所有的服务都被解析完并返回Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

    2.2K20

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

    src/app/ 路径下面 ## 创建一个 product-list 组件 ng g component product-list 需要将组件放置某个指定的目录下,可以直接在 ng g 命令添加路径...,当值为 false ,则这些元素会从 dom 中被销毁,并且所有监听该 dom 元素的事件会被取消,重新显示该元素,会重新执行初始化的过程 与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的...指令上下文中的 index 属性每次迭代,会获取到条数据的索引值 渲染的数据发生改变 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过组件添加一个方法,指定循环需要跟踪的属性值...五、组件的生命周期钩子函数 angular 创建、更新、销毁组件都会触发组件的生命周期钩子函数,通过组件实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges...这个数据信息资源抽取出来用于说明其特征的一个结构化的数据↩ property 是 dom 元素默认的基本属性, dom 初始化时会被全部创建,而 attribute 是 html 标签上定义的属性和值

    15.8K30

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

    注意是如何在原生HTML元素合适的存放。 自定义组件与原生HTML相同的布局无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。...Angular模板是动态的。 Angular呈现它们,它根据指令给出的指示转换DOM。 指令是一个带有@Directive注解的类。...= null"> * ngFor告诉Angular英雄列表中标出每个英雄的一个。 * ngIf仅在选择的英雄存在才包含HeroDetail组件。..._heroService); Angular创建一个组件,它首先要求一个注入器来提供组件需要的服务。 注入器维护一个先前创建的服务实例的容器。...如果请求的服务实例不在容器,那么将服务返回给Angular之前,注入器将创建一个并将其添加到容器所有请求的服务已经解析并返回Angular可以用这些服务作为参数调用组件的构造函数

    7.9K30

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...,但是angular我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变!...app.modules.ts引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据的双向绑定 import...:hidden是要区别开的,if判断为false的时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 需要使用数据绑定的组件进行数据的处理 import { Component, OnInit...官方的话:为没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们也可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

    2.5K30

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

    正常的 HTML 开发过程,你使用 HTML 元素创建视觉结构, 通过把字符串常量设置到元素的 attribute 来修改那些元素。...然后,用封装了 HTML 的组件创建元素,并把它们当作原生 HTML 元素模板中使用。 <!...钩子 用途及时机 ngOnChanges() Angular(重新)设置数据绑定输入属性响应。... Angular 销毁指令/组件之前调用 OnInit钩子 使用 ngOnInit() 有两个原因: 构造函数之后马上执行复杂的初始化逻辑 Angular 设置完输入属性之后,对该组件进行准备.../app.component.scss'] }) 6.属性指令 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令

    15.3K30

    Angular 显示英雄列表

    依次遍历这个列表,hero 会为每个迭代保存当前的英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法的关键部分。 浏览器刷新之后,英雄列表出现了。...click 外面的圆括号会让 Angular 监听这个  元素的 click 事件。 当用户点击  Angular 就会执行表达式 onSelect(hero)。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义的那个。...为什么这样是正常的  selectedHero 为 undefined ,ngIf 从 DOM 移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM

    4.4K70

    Angular 显示英雄列表

    依次遍历这个列表,hero 会为每个迭代保存当前的英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法的关键部分。 浏览器刷新之后,英雄列表出现了。...click 外面的圆括号会让 Angular 监听这个  元素的 click 事件。 当用户点击  Angular 就会执行表达式 onSelect(hero)。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义的那个。...为什么这样是正常的  selectedHero 为 undefined ,ngIf 从 DOM 移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM

    4K30

    angular5面试题_大数据面试题

    Angular双向绑定效率问题 对于页面需要绑定DOM元素极其多的情况(成百上千),必然会遇到效率问题。(具体还取决于PC、浏览器性能)。另外,脏检查超过10次(经验值?)...表达式(以及表达式所调用的函数少写太过复杂的逻辑 不要连接太长的 pipe(往往 pipe里都会遍历并且生成新数组, pipe anglarJS(v1)叫做filter) 变化检测策略onPush...onPush策略,就是只有当输入数据的引用发生变化或者有事件触发,组件才进行变化检测。 NgFor应该伴随trackBy方程使用。...否则,每次脏值检测过程NgFor会把列表里每一项都执行更新DOM操作。...promise都会立即执行;而observables只是被创建调用(subscribe)的时候才会被执行。 Promise返回一个值;Observable返回0至N个值。

    4.3K20

    Angular学习笔记(一)

    @Component 的配置项包括: selector - CSS 选择器,它告诉 Angular 父级 HTML 查找标签,创建并插入该组件。...数据绑定 Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。 往模板 HTML 添加绑定标记,来告诉 Angular 如何把二者联系起来。...指令 Angular 模板是动态的。 Angular 渲染它们,它会根据指令提供的操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:值、函数,或应用所需的特性。...内置结构型指令 NgIf - 根据条件把一个元素添加到DOM或从DOM移除 NgSwitch - 一组指令,用于切换一组视图 NgFor - 对列表的每个条目重复套用同一个模板 模板引用变量 #...生命周期 ngOnChanges() Angular 重新设置数据绑定输入属性响应。该方法接受当前和上一属性值的 SimpleChanges 对象。

    3.3K20

    Angular快速学习笔记(2) -- 架构

    Angular 渲染它们的时候,会根据指令给出的指示对 DOM 进行转换。 指令就是一个带有 @Directive 装饰器的类。...结构型指令 结构型指令通过添加、移除或替换 DOM 元素来修改布局 <app-hero-detail *ngIf="selectedHero...<em>如何</em>使用: <em>在</em> <em>Angular</em> <em>中</em>,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 <em>Angular</em> 可以把它作为依赖注入到组件<em>中</em> 使用 @Injectable 装饰器来表明一个组件或其它类...通常在构造<em>函数</em>,注入依赖的service: constructor(private service: HeroService) { } <em>当</em> <em>Angular</em> 发现某个组件依赖某个服务<em>时</em>,它会首先检查是否该注入器<em>中</em>已经有了那个服务的任何现有实例...你可以<em>在</em>模块<em>中</em>或者组件中注册这些提供商。 - 当你往根模块<em>中</em>添加服务提供商<em>时</em>,服务的同一个实例会服务于你应用<em>中</em>的所有组件。

    5.3K20
    领券