async pipe with a method call in angular 4 calls infinitely

Question

I need to provide select UI element with dynamic options for which I have a method that returns an observable based on the Inputs

TypeScript (Component class)

getCars(type : string, engine : string) : Observable<Cars>{
    return this.carService.getCars(type,engine);
}

In the HTML I make my element call this method for data

Html (Template file)

<ng-select [items]="getCars(type,engine) | async"
    bindLabel="value"
    bindValue="id"
</ng-select>

but this results in service being called infinitely. I do not want to use ngOnInit as I need the observable to be dynamically assigned

score 4 · Accepted Answer · answered Apr 15 '18 at 16:30

4

this is the expected behavior, and how angular change detection works, it's not a good idea to call method from the view and use a property instead

this.cars = getCars(type,engine)

answered Apr 15 '18 at 16:30

Fateh Mohamed

Yup true I had it worked in a different way though:Observable and then – Mahi Tej Gvp Apr 15 '18 at 17:42

score 1 · Answer 2 · answered Apr 15 '18 at 17:46

I achived it by calling this method to change the observable variable

in Component

    car$:Observable<cars> 
getCars(type : string, engine : string) {
    this.car$=this.carService.getCars(type,engine);
}

in Template

<ng-select [items]="car$ | async"
    (focus)="getCars(type,engine)"
    bindLabel="value"
    bindValue="id"
</ng-select>

2 Answers2