点击后清空Angular typeahead输入答案

【问题标题】：Emptying Angular typeahead input after click点击后清空Angular typeahead输入
【发布时间】：2021-11-04 15:38:34
【问题描述】：

我有一个预先输入的下拉菜单，当您单击它时，它会显示过时的值，所以我想使它在单击它时不显示任何内容（直到您输入）。预输入功能本身正在运行。

最初我认为必须在我的组件文件中进行更改（例如清空字段），但看起来它可能在模板中进行（或在 comp 和模板文件中）。

我对 Angular 很陌生，所以如果我的语法/代码/等生锈了，我深表歉意。

组件文件：

// locations
  filteredLocations: Observable<any[]>;
  filteredUserLocations: Observable<any[]>;
  locationTargeting = 'My Location';

getMyLocations(search: string): void {
    const user = this.auth.account$.getValue();
    if (!search.includes(';') && this.locationTargeting === 'My Location') {
// this.filteredUserLocations = new Observable<any[]>(); // tried setting this here (and in other locations), but the typeahead history still appears
      this.filteredUserLocations = this.locationService
      .getTypeaheadLocationsByValue(
        search, // value
        user.id, // accountId
        null, // accountIds
        this.targetingFormGroup.get('groups')?.value) // groupIds
        .pipe(map((result: CollectionResponse<LocationSearchResponse>) => {
          if (result.list) {
            result.list.map((location) => this.addToLocationCache(location.id, location.locationNumber, location.name));
          }

          return result.list && result.list.length > 0 ? [{ label: 'User Locations', values: (result.list || []) }] : [];
        }));

    } else {
      this.filteredUserLocations = new Observable<any[]>();
    }
  }

服务文件：

getTypeaheadLocationsByValue(
    value: string,
    accountId: string,
    accountIds: string[] = null,
    groupIds: string[] = null
  ): Observable<CollectionResponse<LocationSearchResponse>> {
    const searchLocationTypeahead: SearchLocationsTypeaheadByValueRequest = new SearchLocationsTypeaheadByValueRequest();
    if (accountIds) {
      // etc
    }
    if (groupIds) {
      // etc
    }
    searchLocationTypeahead.value = value;
    searchLocationTypeahead.accountId = accountId;

    return this.http.post<CollectionResponse<LocationSearchResponse>>('my-url', searchLocationTypeahead);
  }

模板文件：

          <div *ngIf="hasLocationTargeting" class="add-container">
            <mat-form-field>
              <input autofocus matInput formControlName="locationToAdd"
                data-atm="target-locations-input" [matAutocomplete]="location">
            </mat-form-field>
          </div>

【问题讨论】：

标签： angular input rxjs observable typeahead

【解决方案1】：

您定义了您的 formControlName，因此您只需使用 Reactive Forms 提供的方法。

重置整个表单：

this.targetingFormGroup.reset();

或修补一个值

this.targetingFormGroup.get('locationToAdd').patchValue('');

这应该可以解决问题。如需进一步研究，请查看反应式表单：https://angular.io/guide/reactive-forms

【讨论】：

感谢您的信息（将表单设置为“默认”状态是有意义的），但是更改检测会导致在运行 patchValue 时重复触发 typeahead 下拉菜单（this.targetingFormGroup.get('locationToAdd').patchValue('');)（它使下拉菜单消失并重新出现）。我是否必须分离视图，执行patchValue，然后重新附加视图？或者有更简单的方法吗？谢谢

【解决方案2】：

有多种处理方法。一种这样的方法是最初将值设置为 null / 空数组。你可以这样做：

// locations
  filteredLocations: Observable<any[]>;
  filteredUserLocations: Observable<any[]>;
  locationTargeting = 'My Location';

getMyLocations(search: string): void {
/********* Before you do the actual search, set the observable to null ******/
this.filteredUserLocations = of([]); // This will initially have an empty array and then you can set the value when you want
    

const user = this.auth.account$.getValue();
    if (!search.includes(';') && this.locationTargeting === 'My Location') {
    
this.filteredUserLocations = this.locationService
      .getTypeaheadLocationsByValue(....)

【讨论】：