如何将微调器放置在角度中

Question

我刚刚开始处理现有代码，我的任务是将微调器置于自动完成状态，但不确定在我的Typescript中将isLoading = true和isLoading = false放在哪里。我试图将其放置在所有位置，但是由于某些原因，当我尝试搜索存储在后端的某些数据时，微调器图标仍然没有显示。

有点像这个项目https://stackblitz.com/edit/angular-material-autocomplete-async2，我试图复制，但是当我开始打字时，微调器图标仍未显示在我的项目中。有什么建议或帮助吗？谢谢

  isLoading = false;


  @Input() set workspace(ws: Workspace) {
    this._workspace = ws;
    if (ws && ws.tags) {
      this.superTags = ws.tags.filter(tag => {
        return tag.type == 1;
      });
    }
  }

 constructor(private tagService: TagService) {
    this.mapper();
  }

  ngOnInit(): void {
    this.tagService.getAllTagsByType('super').subscribe((superTags) => {
      if (superTags)
        this.allsuperTags = superTags;
      this.allsuperTags.forEach(superTag => {
        this.allSuperTagNames.push(superTag.tag);
      });
    })
  }


  private _filter(value: string): String[] {
    if (value.length > 0) {
      const filterValue = value.toLowerCase();
      return this.allSuperTagNames.filter(tag => tag.toLowerCase().indexOf(filterValue) === 0);
    }
  }

  add(event: MatChipInputEvent, event1: MatAutocompleteSelectedEvent): void {

    const input = event.input;
    const value = event.value;
    if (event1 === null) {
      input == event.input;
      value == event.value;
    }
    else {
      input == event1.option.value;
      value == event1.option.value;
    }

    if ((value || '').trim()) { 
      if (this.allSuperTagNames.find((f) => f.toLowerCase() === value.toLowerCase()) && !this.superTags.find((f) => f.tag.toLowerCase() === value.toLowerCase()))
        {
            this.superTags.push({ tag: value.trim().toLowerCase(), type: TagType.super }); 
            this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
            this.snackbar.open(input.value + " has been added as super tag.", " ", { duration: 2500 });
        } 
     } 

      // Reset the input value
     if (input) {
        input.value = '';
     }
     this.tagCtrl.setValue(null);
  }

   mapper() {
    this.filteredSuperTags = this.tagCtrl.valueChanges.pipe(
      startWith(null),
      map((tag: string | null) => tag ? this._filter(tag) : this.allSuperTagNames.slice()));
  }

            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngIf="isLoading" class="is-Loading">
                <mat-spinner diameter="20"></mat-spinner>
            </mat-option>
            <ng-container *ngIf="!isLoading">
                <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
                    {{tag}}
                </mat-option>
            </ng-container>
        </mat-autocomplete>

Answer 1

似乎您添加的代码仅用于同步操作。即使您订阅了表单控件，这些标签仍会从预加载的数据中进行本地过滤，所花费的时间将非常短。要真正显示微调框，您可能需要调用API或添加一些延迟以模拟可观察的filter方法，如本示例所示

How can I create an observable with a delay

这样，您可以在延迟期间显示微调框。