如何从模板中调用一次函数？

Question

I use a function call inside an angular2 template. The function itself performs a http network request using http.get(), and returns an Observable of any[] that is actually a css style object:

@Component({
    selector: "test-component",
    template: `<div *ngFor="let item of items" [ngStyle]="lookupStyle(item)"; }} </div>",
})
@Injectable()
export class TestComponent {

    @Input()
    items: Array<any>; 

    lookupStyle(params: any): Observable<any> {
        return this.http.get(/* ... */).map(/* ... */);
    }

    constructor(private http: Http) {}
}

But the above code will trigger an infinite loop ! The function lookupStyle is evaluated every time angular2 change detection takes place. Since http.get() will trigger a change-detection run, the function lookupStyle is re-evaluated after the http request complete - there is your infinite loop.

Is there a solution or a better way in which i could tell angular to evaluate the function lookupStyle only once? Now, I know I could probable come up with some .zip/.combineLatest magic on my viewmodel, but this seems overkill and would prodouce a lot of additional code - thats why I am looking for a better way.

Answer 1

If you really only want it to run once, then this should do the trick:

hasBeenRun: boolean = false;
@Component({
    selector: "test-component",
    template: `<div *ngFor="let item of items" [ngStyle]="lookupStyle(item)"; }} </div>",
})
@Injectable()
export class TestComponent {

    @Input()
        items: Array<any>; 

        lookupStyle(params: any): Observable<any> {
            if(!this.hasBeenRun){
                this.hasBeenRun = true;
                return this.http.get(/* ... */).map(/* ... */);
            }
        }
}
constructor(private http: Http) {}

hasBeenRun would need to be set back to false elsewhere for if you want it to be called again. Hopefully this is what you were looking for, though I also side with ngOnInit() being a very viable solution.