angular - 单击时清除所选项目并防止功能始终执行

Question

我正在尝试使用 mat-select-autocomplete，但我在实现时遇到了一些问题。

第一个问题是函数的 (selectionChange) = "getSelectedOptions ($ event)" 事件总是在我每次单击 mat-select-autocomplete 时运行。是否只有当我选择一个选项时才能执行此功能？

第二个问题：有没有办法在点击提交按钮后清除选中的项目？

演示

.html

<div class="container">
  <mat-select-autocomplete class="grid-7-11"
    [placeholder]="'Options Selection'"
    [errorMsg]="errorMessage"
    [showErrorMsg]="showError"
    [options]="options"
    [display]="'display'"
    [value]="'value'"
    [multiple]='true'
    [labelCount]="2"
    [selectedOptions]="selectedOptions"
    (selectionChange)="getSelectedOptions($event)">
  </mat-select-autocomplete>
</div>

<button (click)="clear()">Submit and clear selects</button>

.ts

  selected: any[]=[];
  showError = false;
  errorMessage = '';


  getSelectedOptions(selected) {
    this.selected = selected;
    console.log(this.selected)
  }

  clear(){ 
    this.selected = [];
    console.log(this.selected)
  }

有人能帮我吗？谢谢你。

Answer 1

您正在使用 nativeselect的selectionChange。
通过查看您的文档，mat-autocomplete您应该使用optionSelected