Angular 6 ngFor

Asked

Viewed 9,398 times

4

They can explain to me why the ngFor directive is triggering the "triggerTeste" function twice, and the array called "items" to which it is traversing only has stored 1 object type element.

app.component.html

<h1>TESTANDO NGFOR</h1>
<div *ngFor="let item of items">
  <div>{{gatilhoTeste(item)}}</div>
</div>

app.componentts.

import { Component, enableProdMode } from '@angular/core';

enableProdMode();
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: any[] = [{id:'String Elemento'}]

  gatilhoTeste(item){
    console.log(item);
  }
}

screenshot da dúvida

angular

  • You have cleared the cache of console?

  • Yeah, I tried other browsers and the same thing happens. If I remove from within the array the object type element and insert a string type element it only runs correctly, only once.

  • How many *ngFor are within the component?

  • This is the only ngFor of the component, actually I left it so I can reset all the possibilities of loop.. I’m beginning to believe that it might be either an Angular bug or a natural Angular behavior..

  • Please post the code instead of image

  • printing the name variable what it shows?

  • @Lucas Brongni, it shows the object inside the array twice.

  • @eduardovargas changed the code to make it simpler

  • I believe he prints for each time the DOM changes so he prints once and then one after inserting the ngFOR element

Show 4 more comments

1 answer

2

The cause of this "problem" is the change detection angular.

This process aims, in a brief explanation, to catch all its componentes and render them in visão.

Each time a detection cycle is called, the component in question is completely reloaded, updating both the view as to the model.

This is a standard behavior, necessary for components to maintain a state always up-to-date.

In your scenario, this seems problematic as it appears to have more than one item in the array. However, this is not the case.

If we make a div to show all the content, it presents only one:

<h1>TESTANDO NGFOR</h1>
<div *ngFor="let item of items">
  <div>{{item.id}}</div>
</div>

inserir a descrição da imagem aqui

Prints only one widget.

Yeah, but why when I do console.log he prints several times?

Well, the lifecycle of the browser console is completely different from the lifecycle of an Angular component. Both are separate, one is the responsibility of the browser itself, the other of the application. When a component change detection occurs, the browser does not know it, it only prints what it receives.

Therefore, as the component is recharged several times during this process, the console.log is consequently called several times.

Development X Production

There is another point that is, when run in development mode, the change detection cycle occurs twice for each component. Already in production mode, this cycle is called only once.

If you build your project in production mode, it will only print once.

https://angular.io/guide/lifecycle-hooks

Stackblitz: https://stackblitz.com/edit/angular-ts7s7a

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.