如何检测用户何时清除了mat-autocomplete的选择？

Question

根据自动完成选择的值，我需要更新一些其他表单域。

因此，我添加了optionSelected事件处理程序：

<mat-autocomplete (optionSelected)="onOptionSelected($event)">
    <mat-option *ngFor="let item of items"
                [value]="item">
        <span>{{item}}</span>
    </mat-option>
</mat-autocomplete>

用户应该能够清除选择，在这种情况下，我需要重置其他字段，也。

问题是当mat-autocomplete被用户清空时，optionSelected不会被触发。

如何捕获autocomplete was cleared事件？

Answer 1

你能做的就是为你的mat- FormControl创建一个自动完成

myControl = new FormControl();

然后将它与HTML中的mat-autocomplete关联起来

<mat-autocomplete [formControl]="myControl" (optionSelected)="onOptionSelected($event)">
    <mat-option *ngFor="let item of items"
                [value]="item">
        <span>{{item}}</span>
    </mat-option>
</mat-autocomplete>

最后，在组件中监听值更改并请求新数据，然后将其设置为您的选项

this.myControl.valueChanges
  .pipe(
    debounceTime(500),
    distinctUntilChanged(),
    takeUntil(this.ngUnsubscribe) // optional but recommended 
  )
  .subscribe(searchPhrase => check if empty);