3

我已经成功实现了 mat-autocomplete，如果从自动完成下拉菜单中选择它，它工作正常。当我输入一些文本并导航到其他字段而不选择下面的自动完成字段时，我遇到了问题。它保留在自动完成字段中键入的值。

我已使用以下方法来解决此问题-

  1. MatAutocompleteTrigger - 下面的代码我在 ts 文件中使用过 -

      @ViewChild('autoCompleteInput', { static: false,read: MatAutocompleteTrigger })  trigger: MatAutocompleteTrigger;
.
.
.
this.trigger.panelClosingActions
  .subscribe(e => {
   if (!(e && e.source)) {
   this.accountForm.get('accountId').setValue="";
   this.account.accountId = null;
   }
})

    首先，我无法将它保存在任何角度的生命周期钩子中。此触发器在角度生命周期挂钩期间不会被初始化，但稍后它会从 mat-autocomplete 接收任何值。因此，只要我在字段中输入文本，它就会清除值（保留下面的自动完成列表；看起来不太好）

    2.在filterOptions上使用了observalble（在我的自动完成字段上可以观察）-我使用了下面的代码-

     this.filteredOptions = this.accountForm.get('accountId').valueChanges.pipe(
  debounceTime(250),
  distinctUntilChanged(),
  filter(searchString => typeof searchString === 'string'),
  filter(searchString => searchString.length > 0),
  switchMap(searchString => {
    return this.accountService.autoCompleteBrokerSearch(searchString);
  })
);
this.filteredOptions.takeUntil(this.ngUnsubscribe).subscribe((lookups: accountEntityModel[]) => {
  if (lookups.length === 0) {
    this.account.accountId = null;
    this.accountForm.get('accountId').patchValue('');
  }
  if(lookups.find(value => value.id !== this.account.id)){
    this.account.accountId = null;
    this.accountForm.get('accountId').patchValue('');
  }
});

使用模板代码 -

<mat-form-field  appearance="standard" >
<mat-label>{{ 'account.enterAccount' | translate }}</mat-label>
<input
 matInput
 formControlName="accountId"
 class="search-select"
 [matAutocomplete] = "accountAutocomplete"
#autoCompleteInput="matAutocompleteTrigger">
<mat-autocomplete #accountAutocomplete = "matAutocomplete" [displayWith]="displayFn.bind(this)" >

    <mat-option [value]="accountOption" *ngFor="let accountOption of filteredOptions | async" (onSelectionChange)="onEnteredAccount(accountOption)" >{{
        accountOption.description
      }}</mat-option>

</mat-autocomplete>

</mat-form-field>

如果我们没有从自动完成中选择任何内容，我只需要清除该字段，它也应该从表单中清除字段值。

4

2 回答 2

0

您可以从输入中删除 formControl-binding，当您选择一个选项时，您可以将该 id 设置为您的表单。

您已经在调用这样的函数(onSelectionChange)="onEnteredAccount(accountOption)"，您可以在其中执行此操作。

于 2019-12-06T10:32:06.383 回答
0

它对我来说工作正常..

HTML：

     <mat-form-field appearance="outline">
          <input type="text" placeholder="start type.." #autoCompleteInput="matAutocompleteTrigger"
              matInput [matAutocomplete]="catAuto" [formControl]="selectedData" (keyup)="onChange($event)">
          <mat-autocomplete #catAuto="matAutocomplete" [displayWith]="displayFnForAutoComplete"
              (optionSelected)="onSelect($event.option.value)">
              <mat-option *ngFor="let option of filterList" [title]="option" [value]="option.id">
                  {{option.name}}
              </mat-option>
          </mat-autocomplete>                  
     </mat-form-field>

TS：

@ViewChild('autoCompleteInput', { static: false, read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
selectedData = new FormControl();

 ngAfterViewInit() {
    this.trigger.panelClosingActions
      .subscribe(e => {
        this.selectedData.setValue(null);
      });
  }
于 2021-12-01T15:24:10.933 回答