Очистить выбранные элементы по щелчку и предотвратить выполнение функции всегда

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

Вы используете собственный select selectionChange .
При просмотре документации mat-autocomplete вы должны использовать optionSelected