在 angular 4 次无限调用中调用方法的异步管道

Question

我需要为 select UI 元素提供动态选项，为此我有一个方法 returns 一个基于输入

的可观察对象

TypeScript（组件class）

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

在 HTML 中，我让我的元素为数据调用此方法

Html（模板文件）

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

但这会导致服务被无限调用。我不想使用 ngOnInit，因为我需要动态分配 observable

Answer 1

这是预期的行为，以及 angular 变化检测的工作原理，从视图调用方法并使用属性代替

并不是一个好主意

this.cars = getCars(type,engine)

Answer 2

我是通过调用这个方法改变可观察变量来实现的

在组件

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

在模板中

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

async pipe with a method call in angular 4 calls infinitely