Aufruf einer Funktion in ngFor in angular2

Question

Hallo Ich benutze Angular2 und wollte den Server holen und einige Werte für jede ID bekommen, die ich in ngFor bekomme.

Answer 1

Besser tun solche Funktion auf jedes Element in ngOnInit in einem Abonnement, und dann sollten sie mit * ngFor nach der Umwandlung angezeigt werden.

und Änderung:

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

zu

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

Answer 2

Sie können Verwendung von benutzerdefinierten Richtlinie machen das Verfahren für jede Iteration zu nennen:

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'); 
    } 

} 

und dann können Sie es verwenden in Ihrem * ngFür den Aufruf der Methode in Ihrer Komponente:

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

in Ihrer Komponente Sie diese Methode als anrufen:

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

Answer 3

klingen nicht sehr gut, aber die einfachste Art und Weise:

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

Richtige Art und Weise:

@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 Ihrer Klasse:

 myFunction =():void=>{ 

     console.log('whatever'); 
     } 

Answer 4

Wie wäre es Ändern von Daten, bevor sie an *ngFor in Typoskript selbst,

kommen

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 5

Die Vorlage ist nicht der Ort, das zu tun, Sie mögen, dass Ihre Daten in dem Komponentencode zu erhalten. Klingt so, als ob Sie etwas wie flatMap eines Observablen verwenden möchten, mit dem Sie für jedes Element in der Quelle eine weitere Observable zurückgeben können. Dies könnte die Rückkehr eines http-API Anruf oder was auch immer (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}