Angular Material 2 远程自动完成。如何中止请求？

Question

我正在使用 Angular Material Autocomplete 根据对远程 API 的搜索列出结果（过滤在远程端完成）。

HTML 方面：

<mat-form-field class="full-width">
    <input type="text" placeholder="Brand" aria-label="Number"
        matInput [formControl]="formControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let brand of brands | async" [value]="brand.name">
            {{ brand.name }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

TS方：

this.brands = this.formControl.valueChanges.flatMap(
    q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);

此时，一切正常。我从远程获取品牌列表，我可以从自动完成列表中选择一个值。现在的问题是....每次输入文本更改时如何中止所有请求？

有很多关于远程请求的例子，但我们的想法不是在初始化时获得所有远程结果。这个想法是在每次用户更改文本输入时获得远程结果。

Answer 1

我刚刚将flatMap 更改为switchMap 并且工作得像个魅力：

this.brands = this.formControl.valueChanges.switchMap(
    q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);

正如 Benedikt 在评论中所说，如果您在键入时中止 XHR 请求，请求仍会在服务器上执行，并且 - 在规模上 - 可能会导致非常高的负载。最好只在用户停止输入后 500 毫秒发出 XHR。这已经减少了请求的数量。为此：

this.brands = this.formControl.valueChanges.debounceTime(500).switchMap(
    q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);