首页
学习
活动
专区
工具
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 指南- 模板语法二 顶

当模板表达式计算结果为true时,Angular会添加类。 当表达式为false时,它将删除类。 时,处理程序执行模板语句。 模板语句通常包含一个接收器,它响应事件执行一个动作,例如将HTML控件的值存储到模型中。...当指令没有合适的宿主元素时如何对元素进行分组。 如何编写自己的结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见的结构指令: NgIf:有条件地从DOM中添加或删除元素。...当NgIf为false时,Angular从DOM中删除元素及其后代。 它摧毁了他们的组件,潜在地释放了大量的资源,从而带来了更加快速的用户体验。 展示/隐藏技术适合少数几个后代的元素。...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...元素中的* ngFor是Angular“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

    Angular 显示英雄列表

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

    4.4K70

    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.6K30

    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 中。

    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快速学习笔记(2) -- 架构

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

    5.3K20

    Angular学习笔记(一)

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

    3.3K20
    领券