html - Why is my (selectionChange) continuously executing?

Question

I have created an angular project using a custom multi-select-autocomplete that has

  @Output() selectionChange: EventEmitter<any[]> = new EventEmitter<any[]>();

As well as the following method

onSelectionChange(val : any) {
const filteredValues = this.getFilteredOptionsValues();
let count = 0;
if (this.multiple) {
  this.selectedValue?.filter(item => {
      if (filteredValues.includes(item)) {
          count++;
      }
  });
  this.selectAllChecked = count === this.filteredOptions.length;
}
this.selectedValue = val.value;
this.selectionChange.emit(this.selectedValue);
}

I use it in my other components as such

            <div style="width: 100%; margin-right: 26px; margin-bottom: 15px;">
          <multi-select-autocomplete class="input-medium"
                                     [placeholder]="'Search and Select Brands'"
                                     [options]="companies"
                                     [display]="'name'"
                                     [value]="'id'"
                                     [labelCount]="10"
                                     [label]="'Brands'"
                                     (selectionChange)="selectBrand($event)">
          </multi-select-autocomplete>
        </div>
      </div>

But I come across an issue where the (selectionChange) method is continuously firing even before I make a selection.

Any ideas where I may have gone wrong?

Answer 1

等待大神答复