Question

我在angular2模板中使用函数调用。函数本身使用http.get（）执行http网络请求，并返回实际上是css样式对象的任何[]的Observable：

@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) {}
}

但上面的代码会触发无限循环！每次进行角度2变化检测时，都会评估函数lookupStyle。由于http.get()将触发更改检测运行，因此在http请求完成后重新评估函数lookupStyle - 存在无限循环。

我是否有解决方案或更好的方法可以告诉角度来评估函数lookupStyle一次？现在，我知道我可能会在我的视图模型中提出一些.zip/.combineLatest魔法，但这似乎有些过分，并会产生很多额外的代码 - 这就是为什么我在寻找更好的方法。

Answer 1

如果你真的只想让它运行一次，那么这应该可以解决问题：

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，则需要将其设置为false。希望这是你所寻找的，尽管我也支持ngOnInit()是一个非常可行的解决方案。

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

1 个答案: