angular - 如何检测用户何时清除 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 不会被触发。

如何捕获自动完成已清除事件？

Answer 1

您可以做的是为 mat-autocomplete 创建一个 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);