1

我想显示一个加载指示器，因为我的自动完成输入用于从 Web 服务获取建议。

我有以下 HTML：

<mat-form-field>
  <input type="text"
    placeholder="Enter a Suburb"
    matInput
    [formControl]="myControl"
    [matAutocomplete]="auto">

  <mat-autocomplete 
       autoActiveFirstOption 
       #auto="matAutocomplete" 
       [displayWith]="displayFn">
    <mat-option *ngFor="let item of suburbList" [value]="item">
      {{ item.value }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
<i *ngIf="loading > 0" class="far fa-spinner fa-pulse"></i>

后面有以下 TypeScript：

 loading = 0;
 myControl = new FormControl();
 suburbList: KeyValuePair<number, string>[] = [];

 constructor(private DataService: ListItemLookupService) {
    this.myControl.valueChanges
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(
         value =>
         {
           if (value === null || value.length < 3) { return []; }
           this.loading = 1;
           return this.DataService.loadSuburbList(value);
         })
    .subscribe(data => {this.suburbList = data; this.loading = 0; },
               error => {this.loading = 0;},
               () => {this.loading = 0;}
       );
  }

期望的结果是显示和隐藏 FontAwesome 微调器。

实际发生的情况是，如果我打字相对较快，则会创建并显示多个微调器。我认为这是因为实际上有多个线程正在运行以从 Web 服务 ( this.DataService.loadSuburbList(value)) 获取数据。

我不想在这里提供单例服务，因为单个表单上可能有多个自动完成查找。我已经尝试为此研究 rxJs 技术，并假设答案类似于 C# 委托。我不知道如何从这里开始。

*注意：我将其设为计数器而不是布尔值，因此我可以跟踪出于调试目的而调用它的次数。我首先假设它一定与 switchMap 没有按我预期的那样工作有关。

*编辑：在进一步测试中，这似乎是新 FontAwesome 软件包的错误。如果使用静态“正在加载...”字符串，它会按预期工作。

4

0 回答 0