angular2

Question

में ngFor के अंदर एक फ़ंक्शन को कॉल करें हैलो मैं Angular2 का उपयोग कर रहा हूं और सर्वर लाने और प्रत्येक आईडी के लिए कुछ मान प्राप्त करने के लिए चाहता हूं जो मुझे 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

बेहतर इस तरह के समारोह कर * ngFor परिवर्तन के बाद एक सदस्यता में ngOnInit में प्रत्येक आइटम पर कहता है, और फिर वे साथ प्रदर्शित किया जाना चाहिए।

और परिवर्तन:

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

} 

और उसके बाद आप इसका इस्तेमाल कर सकते हैं:

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

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

Answer 2

आप प्रत्येक यात्रा के लिए विधि कॉल करने के लिए कस्टम निर्देश का उपयोग कर सकते करने के लिए आपके * ngFor में आपके घटक में विधि को कॉल करने के लिए:

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

आपका घटक में आप के रूप में इस विधि कॉल कर सकते हैं:

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

Answer 3

बहुत अच्छा है, तथापि, सबसे आसान तरीका नहीं लगती:

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

उचित तरीका:

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

आपकी कक्षा में:

 myFunction =():void=>{ 

     console.log('whatever'); 
     } 

Answer 4

कैसे के बारे में बदलने के डेटा से पहले यह टाइपप्रति अपने आप में *ngFor की बात आती है,

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

टेम्पलेट, आप घटक कोड में अपने डेटा प्राप्त करना चाहते करने के लिए जगह नहीं है। लगता है जैसे आप किसी अवलोकन के जैसे कुछ उपयोग करना चाहते हैं, जिससे आप स्रोत में प्रत्येक आइटम के लिए एक और अवलोकन कर सकते हैं। यह एक http एपीआई कॉल का रिटर्न या (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}