1

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

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

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

有没有一种解决方案或更好的方法可以告诉 angular 只评估lookupStyle一次函数？现在，我知道我可能会在我的视图模型上想出一些.zip/.combineLatest魔法，但这似乎有点矫枉过正，并且会产生很多额外的代码——这就是我寻找更好方法的原因。

4

1 回答 1

0

如果您真的只希望它运行一次，那么这应该可以解决问题：

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()成为一个非常可行的解决方案。

于 2016-08-15T17:47:12.860 回答