CODEWITHSUNDEEP
angularbootstrap-4angular-bootstrapangular-pipe
Mahi Tej Gvp
Mahi Tej Gvp

Reputation: 1034

async pipe with a method call in angular 4 calls infinitely

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

I'm using this UI element for select

Upvotes: 6

Views: 4411

Answers (2)

Mahi Tej Gvp
Mahi Tej Gvp

Reputation: 1034

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>

Upvotes: 1

Fateh Mohamed
Fateh Mohamed

Reputation: 21367

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)

Upvotes: 4

Related Questions