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

Angular *ngFor over地图运行多次,但应该只运行一次

Angular中的ngFor指令用于循环遍历一个集合,并为集合中的每个元素生成相应的HTML代码。在某些情况下,ngFor可能会在地图运行时多次执行,而实际上我们希望它只运行一次。

解决这个问题的方法是使用Angular的trackBy函数。trackBy函数用于指定如何跟踪集合中的元素,以便在重新渲染时能够正确地识别和更新元素。

首先,我们需要在组件中定义一个trackBy函数,该函数接收两个参数:索引和元素。它应该返回一个唯一标识符,用于跟踪集合中的元素。例如,我们可以使用元素的ID作为唯一标识符。

代码语言:txt
复制
trackByFn(index, item) {
  return item.id;
}

然后,在*ngFor指令中使用trackBy函数:

代码语言:txt
复制
<div *ngFor="let item of items; trackBy: trackByFn">
  <!-- 元素的HTML代码 -->
</div>

通过使用trackBy函数,Angular将根据元素的唯一标识符来跟踪和更新元素,而不是根据元素在集合中的位置。这样,即使地图运行多次,Angular也能正确地识别和更新元素,保证只运行一次。

对于地图运行多次的具体场景,我无法给出具体的推荐腾讯云产品和产品介绍链接地址,因为这与具体的业务需求和技术架构有关。但是,腾讯云提供了丰富的云计算产品和解决方案,可以根据具体需求选择适合的产品,例如云服务器、云数据库、云存储等。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

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

相关·内容

AngularDart 4.0 高级-生命周期钩子 顶

ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数中获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...当ngOninit运行时,它们将被设置。 ngOnChanges方法是您第一次访问这些属性的机会。 在ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。...它调用一次ngOnInit。 您可以期待Angular在创建组件后立即调用ngOnInit方法。 这就是深度初始化逻辑所属的地方。...ngOnChanges并没有捕捉到hero.name的变化,这一开始令人惊讶。 当输入属性的值改变时,Angular只会调用钩子。 hero属性的值是对hero对象的引用。

6.2K10

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

>Save 有些人更喜欢使用前缀on-替代方法,称为规范形式: On Save 元素事件可能是更常见的目标,Angular...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...Angular把选中的元素放入DOM中。 NgSwitch实际上是一组三个协作指令:NgSwitch,NgSwitchCase和NgSwitchDefault,如本例所示。...不要在同一模板中多次定义相同的变量名称。 运行时值将是不可预知的。 你可以使用ref-前缀替代#。 本示例将fax变量声明为ref-fax,而不是#fax。...The title is {{title}} 视图仍然呈现,显示的值是空白的; 你看到“The title is”没有任何东西。 这是合理的行为。 至少该应用程序不会崩溃。

29.9K20

ng-content 中隐藏的内容

由于许多问题与Angular 中的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示它已被实例化的次数: import { Component } from '@angular/core';...这意味着我们的计数器组件被实例化了一次 - 从未被销毁和重新创建。...难道这是 ngIf 指令产生的问题,让我们测试一下 ngFor 指令,看看是否有同样的问题: import { Component } from '@angular/core'; @Component...将组件的生命周期被绑定到我们的应用程序组件而不是包装器的意义是,开发者可以掌控计数器被实例化一次,而不用了解第三方库的内部代码。 性能的原因更为重要。...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

2.7K30

Angular 6.x 基础教程

本系列教程的主要内容来源于 egghead.io get-started-with-angular 视频教程,针对视频中的介绍的知识点做了适当地补充,建议有兴趣的同学直接查看该视频教程。...第四节 - 事件进阶 获取鼠标事件 在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?...指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...第八节 - 使用双向绑定 使用过 AngularJS 1.x 的同学,应该很熟悉 ng-model 指令,通过该指令我们可以方便地实现数据的双向绑定。...用过 AngularJS 1.x 的同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。在 Angular 中,对应的指令是 ngClass 。

15.6K20

AngularDart 4.0 高级-管道 顶

管道和变化检测 Angular通过在每个DOM事件之后运行的更改检测过程查找数据绑定值的更改:每次击键,鼠标移动,计时器滴答和服务器响应。 这可能是昂贵的。 Angular努力尽可能降低成本并适当。...每个管道实例调用一次服务器。 JsonPipe 在前面的代码示例中,第二个提取管道绑定显示了更多的管道链接。 它通过链接到内置的JsonPipe以JSON格式显示相同的英雄数据。...纯函数处理输入并返回值,没有可检测到的副作用。 给定相同的输入,他们应该总是返回相同的输出。 本页前面讨论的管道是用纯函数实现的。 内置的DatePipe是一个纯函数实现的纯管道。...当Angular每秒钟多次调用这些管道方法时,即使是中等大小的列表,用户体验也会严重降级。 filter和orderBy经常被滥用在Angular 1应用程序中,导致投诉Angular本身很慢。...虽然有些人可能并不在意这种积极的态度,Angular的产品不应该阻止任何人积极贬低。 因此,Angular团队决定Angular提供的所有内容都将安全地缩小。

6.3K20

AngularDart4.0 英雄之旅-教程-08HTTP 顶

如果该应用程序尚未运行,请启动该应用程序。 在进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包的客户端类与服务器进行通信。...但是请求并不总是一次。 您可以启动一个请求,取消它,并在服务器响应第一个请求之前发出不同的请求。 使用期货很难实现请求取消新请求序列,使用Streams很容易。...正如所料,* ngFor从组件的英雄属性重复英雄对象。 正如你很快就会看到的,英雄的财产现在是一个英雄列表的流,而不仅仅是一个英雄名单。...* ngFor只能通过异步管道(AsyncPipe)进行路由才能对Stream执行所有操作。 异步管道subscribes 流并产生* ngFor的英雄列表。...它取消并放弃以前的搜索,返回最新的搜索服务流元素。 handleError()处理错误。 这个简单的例子将错误输出到控制台。 一个真实的应用程序应该做的更好。

11K30

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

,不应该改变任何的数据;应该构建出幂等的表达式,除非依赖的值发生变化,否则多次调用时,应该返回相同的数据信息 4.1.2.2、模板绑定语法 通过数据绑定机制,将数据源与视图进行绑定,从而实现源数据与用户呈现的一致性...:通过定义单条数据的显示格式,angular 以此为模板,循环渲染出所有的数据 {{i+1}} - {...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来在构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...ngAfterContentInit 组件内容渲染完成后调用一次 ngAfterContentChecked 只要组件的内容发生改变就会被调用 ngAfterViewInit 视图加载完成后触发一次,...一般用来对视图的 dom 元素进行操作 ngAfterViewChecked 视图发生变化时调用,在组件的生命周期中会调用多次 ngOnDestroy 在销毁组件时调用一次,一般用来在组件销毁前执行某些操作

15.8K30

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作的,此外,由于我们使用了数据绑定,this.vm.dessertSlides的值更新会影响到dom,所以应该在数据更新从而使得...angular的脏检测机制是基于一定条件和时间的,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果的,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...="item.src" /> 这样当新数据有值且长度大于0时,才会显示ion-slides组件,进而内部进行初始化,此时运行看效果如下

1.4K20

AngularDart4.0 指南- 表单 顶

您可以在Plunker中运行实例(查看源代码)并从那里下载代码。 模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令和技术在Angular模板语法中编写模板来构建表单。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令在表单上注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...这说明有些事情是错的,用户不知道什么是错的,或者该怎么做。 利用控件的状态来显示有用的消息。 使用有效的和原始的状态 当用户删除名称时,表单应该如下所示: ?...如果需要,可以将相同类型的错误消息添加到中,这不是必须的,因为选择框已经将权限限制为有效值。...最终的项目文件夹结构应该如下所示: ?

17.4K30

Angular DOM 抽象概述

这在大多数情况下,是没有问题的,如果我们开发的应用要支持跨平台的话,就不能绑定宿主环境为浏览器。...作用 在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 Web Worker 中,因为在 Web Worker 环境中,是不能操作 DOM。...为我们开发者提供了 元素,在 Angular 内部它主要应用在结构指令中,比如 *ngIf、*ngFor 等。...的初学者,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons...创建的过程还是有点繁琐,为了提高开发者体验和开发效率,Angular 引入了 ngComponentOutlet 指令。 好的,我们马上来体验一下 ngComponentOutlet 指令。

3.5K30

angular入门教程_初学者织围巾简单教程慢动作

VDom、JSX;当别人提到 jQuery 的时候,你首先想到的应该是$对吧?...模板字符串一般只会在第一次被调用的时候编译一次,Handlebars 会把编译好的函数缓存起来,后面再次调用的时候会从缓存里面获取,而不会多次进行“编译”。...上面我们多次提到了“编译”这个词,所以很显然这里有一个东西是无法避免的,那就是我们必须提供一个 JS 版的“编译器”,让这个“编译器”运行在浏览器里面,这样才能在运行时把用户编写的模板字符串“编译”成模板函数...对于 Angular 来说,强调“轻逻辑”还有另一个原因:在组件的整个生命周期里面,模板函数会被执行很多次。...那么需要在同一个 HTML 上使用多个结构型指令应该怎么办呢?

3.3K20

Angular--Module的使用

模块Module Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。 Angular 应用就是由一组NgModule定义的。...只有根模块才应该设置这个 bootstrap 属性。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...2.常用模块NgModules NgModule Import it from Why you use it BrowserModule @angular/platform-browser 当你想要在浏览器中运行...app 时 CommonModule @angular/common 当你想要使用NgIf 和NgFor时 FormsModule @angular/forms 当要构建模板驱动表单时 ReactiveFormsModule...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

4.9K40

AngularDart4.0 英雄之旅-教程-05多组件 顶

当你完成后,应用程序应该看起来像这样。 从哪里开始 在开始使用本页面之前,请确认您之前在“Tour of Heroes”中拥有以下结构。 如果没有,请返回前面的页面。 ?...如果还没运行,请启动应用,保持应用处于运行状态 创建英雄详情组件 创建文件:hero_detail_component.dart,这个文件将控制新组件HeroDetailComponent Angular..."> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect...selectedHero = hero; } lib/app_component.html {{title}} My Heroes <li *ngFor...你的应用应该看起来像这个实例(查看源代码)。 前方的路 “The Tour of Heroes ”游戏的应用程序可以更多地使用共享组件,其(模拟)数据仍然是在AppComponent中硬编码的。

1.8K10

Angular教程】-组件初识|8月更文挑战

前提: 准备一个空的angular项目(ng new angular-course) 与Angular组件的第一次会面 **通过创建组件命令: ****ng g c components/HelloWorld...: 标注组件的名称,在使用组件的时候使用的就是它 templateUrl: 标注html模板的路径 styleUrls: 标注html模板使用的样式的路径,我们看到是用的数组格式,说明传递多个样式文件应该是没有问题的..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array... 绑定一组style试试 NgModel(适用于表单元素...还有多少同学在用angular呀,要不是工作需要也不会再接触了,第一次学angualr还是在15年。还有一点哈,原来都是pia pia贴代码,今天头一回自述的多,就当锻炼了,表述不周还请指正哈。

1.9K20

angular5面试题_大数据面试题

不需要关心class的构造函数里需要什么参数 一次注入(app module通过Providers注入),所有组件都可以使用。...关于angular的编译,AOT和JIT的区别 每个Angular应用程序都包含浏览器无法理解的组件和模板。 因此,在浏览器内部运行之前,需要先编译所有Angular应用程序。...Angular提供两种编译类型: JIT(Just-in-Time) compilation AOT(Ahead-of-Time) compilation 区别在于,在JIT编译中,应用程序在运行时在浏览器内部进行编译...显而易见,AOT编译好处多多,因而是Angular的默认编译方式。主要优点 由于应用程序是在浏览器内部运行之前进行编译的,因此浏览器会加载可执行代码并立即呈现应用程序,从而加快了呈现速度。...NgFor应该伴随trackBy方程使用。否则,每次脏值检测过程中,NgFor会把列表里每一项都执行更新DOM操作。

4.3K20

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

同组件类似,您还可能创建诸如服务services(如稍后我们将创建的数据服务),没有模板和样式,但在结构上类似一个正常的组件。...如果你想知道更多关于在Ionic 2中使用类型,应该学习TypeScript或ECMAScript 6相关知识。...还要注意,按钮本身我们给它一个属性的ion-button将会使用Ionic 2 的按钮样式,而icon-only样式将会让按钮包含一个图标没有文本。...要做这个我们应该知道这是又要创建一个新组件了啊。...现在该函数将马上更新我们的新数据条目数组,items也将被复制保存到数据服务,以便下次我们回到应用程序是可用。

6.1K50
领券