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)
);

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

有很多远程请求的例子，但想法不是在 init 上获取所有远程结果。这个想法是在每次用户更改文本输入时获得远程结果。

Answer 1

我刚刚用 switchMap 改变了 flatMap 并且工作得很好:

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

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

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