在ngFor中調用函數在angular2中

Question

你好，我正在使用Angular2，想要獲取服務器併爲我在ngFor中獲得的每個ID獲取一些值。

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

Answer 1

更好的做法是在訂閱中對ngOnInit中的每個項目進行這樣的函數調用，然後在轉換後用* ngFor顯示它們。

和變化：

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

到

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

Answer 2

您可以使用自定義的指令，呼籲每個迭代的方法：

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

} 

，然後你可以使用它在* 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

模板怎麼不這樣做，你想在組件代碼數據的地方。聽起來就像你想要使用可觀察對象的flatMap之類的東西，它可以讓你爲源可觀察對象中的每個項目返回另一個可觀察對象。這可能是http api調用或任何其他回報(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}