Javascript 使用数组作为数据而不是Api自动完成加载微调器

该线程显示了使用内存中web API作为伪API的加载微调器的autocomplete示例：

问题是，我想用数组而不是内存中的web API来实现它

因此，在autocomplete.service.ts文件中，我为搜索功能执行了以下操作：

search(filter: {name: string} = {name: ''}, page = 1): Observable<IUserResponse> {

  this.commune = {
  total: 4,
  results: [

    { id: 1, name: 'Windstorm' },
    { id: 2, name: 'Bombasto' },
    { id: 3, name: 'Magneta' },
    { id: 4, name: 'Tornado' },
    { id: 5, name: 'Agnosto' }
  ]
}

/** (This works with the in mem web api but i wish to use an array instead) return 
              this.http.get<IUserResponse>('/api/users') **/

return of<IUserResponse>(this.commune)
.pipe(
  tap((response: IUserResponse) => {
    response.results = response.results
      .map(user => new User(user.id, user.name))
      // Not filtering in the server since in-memory-web-api has somewhat restricted api
      .filter(user => user.name.includes(filter.name))

    return response;
  })
  );


 }

---

}

要使用

管道

您需要一个ovservable。您可以使用

of

或

from

fromfrom

rxjs

库将数组转换为包含数据的可观察对象

它与内存中的api一起工作，因为http调用返回一个可观察的api

请注意，您仍然需要一个异步调用才能显示加载程序。也许调用

detectChanges（）

可以工作，但您应该将其作为最后的手段

这里基于material autocomplete文档，向您展示了如何模拟加载程序，但它为检索数据的过程增加了一秒钟。为此，我刚刚添加了

delay（1000）

。代码如下：

.ts:

.html：

<mat-form-field class="example-full-width">
        <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngIf="isSearching; else notSearching">loader here</mat-option>
            <ng-template #notSearching>
                <mat-option *ngFor="let option of filteredOptions" [value]="option">
                    {{option}}
                </mat-option>
            </ng-template>
        </mat-autocomplete>
    </mat-form-field>

这里是加载器
{{option}}

谢谢，我认为“finalize”在我的网站中不合适code@dealbuquerquefrank是的，我不认为你需要定稿，但我真的不知道如何使用它，所以我不确定。但是，在这种情况下，您不需要嵌套一个pipefinalize，因为该observable不完整，所以它不能与自定义observable一起工作！finalize仅适用于http angular，我必须用我的自定义对象模拟一个完整的对象才能使finalize工作！正如我说的，不要使用finalize，这里不需要它。但是正如我之前所说的，您不应该在这里使用自定义的可观察对象，至少您可以创建一个异步方法来管理您的过滤器，并使用它正确地显示加载程序，而不是用“延迟”来伪造它

@Component({
  selector: "autocomplete-auto-active-first-option-example",
  templateUrl: "autocomplete-auto-active-first-option-example.html",
  styleUrls: ["autocomplete-auto-active-first-option-example.css"]
})
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
  myControl = new FormControl();
  options: string[] = ["One", "Two", "Three"];
  filteredOptions: string[];
  isSearching = false;

  ngOnInit() {
    this.myControl.valueChanges
      .pipe(
        debounceTime(200),
        tap(_ => this.isSearching = true),
        map(value => this._filter(value)),
        delay(1000),
        tap(data => {
          this.isSearching = false;
          this.filteredOptions = data;
        })
      ).subscribe();
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    
    return this.options.filter(
      option => option.toLowerCase().indexOf(filterValue) === 0
    );
  }
}

<mat-form-field class="example-full-width">
        <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngIf="isSearching; else notSearching">loader here</mat-option>
            <ng-template #notSearching>
                <mat-option *ngFor="let option of filteredOptions" [value]="option">
                    {{option}}
                </mat-option>
            </ng-template>
        </mat-autocomplete>
    </mat-form-field>