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

我刚刚用#include <ESP8266WiFi.h> #include <ESP8266HTTPClient.h> const char* ssid = "Next-Guest"; const char* password = ""; void setup () { Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("Connecting.."); } } void loop() { if (WiFi.status() == WL_CONNECTED) { HTTPClient http; //http.begin("http://jsonplaceholder.typicode.com/users/1"); <- this works http.begin("https://makerspace.albe.pw/api/getDoorStatus.php"); // <- this doesn't int httpCode = http.GET(); Serial.println(httpCode); if (httpCode > 0) { String payload = http.getString(); Serial.println(payload); } http.end(); } delay(30000); }更改了flatMap并且像魅力一样工作：

switchMap

正如Benedikt在评论中所说，如果您在键入时中止XHR请求，请求仍然在服务器上执行，并且 - 大规模 - 可能会导致非常高的负载。仅发出XHR是一种很好的做法，例如，在用户停止输入后500毫秒。这将减少请求数量。要做到这一点：

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

角度材料2远程自动完成。如何中止请求？

1 个答案: