angular - 防止值更改触发自动完成 setValue

Question

我创建了一个自动完成和一个选项组件，当我们在输入字段中键入搜索短语时，我调用网络服务并获取数据，然后在选项组件中显示列表，但是当我从该列表中选择一个选项并将值设置为输入字段，然后 Web 服务将再次触发。我怎样才能防止这种情况发生？示例是 Material 设计自动完成的工作原理，我在从选项列表中选择某些内容时想要类似的功能。谢谢。

<app-rx-search-field>
          <input id="rx-search-field" type="search" class="form-control __search_field" name="search" placeholder="Search" autocomplete="off" [formControl]="providerSchoolSearchCtrl" formControlName="school" />
          <app-rx-options [optionsList]="suggestedSchoolsList$ | async" [key]="'school.name'" (optionSelected)="onOptionSelected($event)"></app-rx-options>
        </app-rx-search-field>

this.providerSchoolSearchCtrl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        mergeMap(search => of(search).pipe(
          delay(500)
        ))
      ).subscribe({
      next: value => {
        this.store.dispatch(new GetSchoolRequest({isRequesting: true, searchPhrase: value}));
      }
    });

public onOptionSelected = (event: any) => {
    console.log(event);
// This is to set the value for the input field
    this.providerSchoolSearchCtrl.setValue(event.option['school.name']);
    this.providerEducation.controls['school'].setValue(event.option['school.name'], {emitEvent: false});
  }

Answer 1

你可以试试这个选项，当给控件设置值的时候。 setValue 方法有第二个参数，我们可以通过它来控制是否应该发出事件。

 this.providerSchoolSearchCtrl.setValue(event.option['school.name'], {emitEvent: false});

查看 Angular 文档:https://angular.io/api/forms/FormControl#setValue