Call function inside ngFor in angular2

Question

Hello, I am using Angular2 and I want to get the server and get some values ​​for each identifier that I get inside ngFor.

<div *ngFor="let item in items"> <span> here call a function that do something with 'item' and return something new <span> </div> 

Answer 1

You can use a custom directive to call a method for each iteration:

 import { Directive, Output, EventEmitter, Input, SimpleChange} from '@angular/core'; @Directive({ selector: '[onCreate]' }) export class OnCreate { @Output() onCreate: EventEmitter<any> = new EventEmitter<any>(); constructor() {} ngOnInit() { this.onCreate.emit('dummy'); } } 

and then you can use it in your * ngFor to call a method in your component:

 <div *ngFor="let item of items"> <div *ngIf="item" (onCreate)="yourMethod(item)"> </div> </div> 

in your component, you can call this method as:

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

Answer 2

That doesn't sound very good, however, the easiest way:

 <div *ngFor="let item of items"> <span data-dummy="{{myFunction()}}" > here call a function that do something with 'item' and return something new <span> </div> 

The right way:

 @Directive({ selector: '[runDummyFunc]' }) export class runDummyFunc { constructor() {} ngOnInit() { this.runDummyFunc() } } <div *ngFor="let item in items"> <span [runDummyFunc]="myFunction" > here call a function that do something with 'item' and return something new <span> </div> 

In your class:

  myFunction = ():void=>{ console.log('whatever'); } 

Answer 3

How about changing the data before it reaches *ngFor in Typescript ,

 this.items.forEach((item,index)=>{ item=this.func(item,index); }) func(item,index):string{ return item+ String(index); //do whatever you wish to do. } 

Answer 4

It is better to make such function calls for each element in ngOnInit in the subscription, and then they should be displayed using * ngFor after conversion.

and change:

 <div *ngFor="let item in items"> 

to

 <div *ngFor="let item of items"> 

Answer 5

There is no place for this in the template; you want to get your data in the component code. It looks like you want to use something like flatMap observable, which allows you to return another observable for each element in the observable source. This can be a return call http api or ( fiddle ) :

 var ids = ["a", "d", "c"]; var lookupValues = { "a": 123, "b": 234, "c": 345, "d": 456 }; // given an id function fakeApiCall(id) { // given an id, return an observable with one entry: an object consisting // of an 'id' property with that id value and a 'lookup' property with the // value from lookupValues for that id return Rx.Observable.just({ id: id, lookup: lookupValues[id] }); } var o1 = Rx.Observable.from(ids); // 'a, d, c var o2 = o1.flatMap(x => { // here we get each value from o1, so we do an api call and return // an observable from each that will have the values in that // observable combined with all others to be sent to o2 return fakeApiCall(x); }); o2.subscribe(x => { document.write(JSON.stringify(x) + "<br/>"); }); // result: // {"id":"a","lookup":123} // {"id":"d","lookup":456} // {"id":"c","lookup":345} 

Answer 6

You can use trackBy:

 @Component({ selector:'heroes', template: ' <table> <thead> <th>Name</th> </thead> <tbody> <tr *ngFor="let hero of heroes; trackBy: trackHero" > <td>{{hero.name}}</td> </tr> </tbody> </table>'}) export class Heroes { heroes = HEROES; trackHero(index, hero) { console.log(hero); } } 

Answer 7

Not sure if this is what you are asking for, but you can pass the element to the function along with the event variable as follows:

 <div *ngFor="let item in items"> <span (click)="functionCall($event, item)"> <span> </div> 

And then grab this item in your class as follows:

 functionCall(event, item): void { console.log('item clicked:", item) } 

Answer 8

 Component({ selector:'heroes', template: ' <table> <thead> <th>Name</th> </thead> <tbody> <tr *ngFor="let hero of heroes; trackBy: trackHero" > <td>{{hero.name}}</td> </tr> </tbody> </table> ' }) export class Heroes { heroes = HEROES; trackHero(index, hero) { console.log(hero); return hero ? hero.id : undefined; } }