带有角度4中方法调用的异步管道无限调用答案

【问题标题】：async pipe with a method call in angular 4 calls infinitely带有角度4中方法调用的异步管道无限调用
【发布时间】：2018-04-15 15:45:18
【问题描述】：

我需要为选择 UI 元素提供动态选项，我有一个方法可以根据输入返回可观察对象

TypeScript（组件类）

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

【问题讨论】：

【解决方案1】：

这是预期的行为，以及角度变化检测的工作原理，从视图调用方法并改用属性不是一个好主意

this.cars = getCars(type,engine)

【讨论】：

【解决方案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>

【讨论】：