typescript - Hur triggar man optionSelected i Angular Material autocomplete programmatiskt?

Jag har en Angular Autocomplete-komponent som jag försöker trigga (optionSelected)-händelsen i ts-filen efter en annan händelse. Jag sätter inputen med det uppdaterade alternativet med this.myControl.setValue(options[1].value), men det triggar inte Autocomplete (optionSelected)-händelsen.

Här är en stackblitz:

https://stackblitz.com/edit/angular-s3gn1w-xtfxgb?embed=1&file=app/autocomplete-simple-example.ts

import { Component ,ViewChild} from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteTrigger, MatAutocompleteSelectedEvent } from '@angular/material'

/**
 * @title Simple autocomplete
 */
@Component({
  selector: 'autocomplete-simple-example',
  templateUrl: 'autocomplete-simple-example.html',
  styleUrls: ['autocomplete-simple-example.css'],
})
export class AutocompleteSimpleExample {
  @ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;
  myControl = new FormControl();
  activeOption
  options: string[] = ['One', 'Two', 'Three'];
  trigger?: any;

  setValue() {
    let options = this._auto.autocomplete.options.toArray()
    this.myControl.setValue(options[1].value)
  }

  optionSelected($event: MatAutocompleteSelectedEvent): void {
    console.log('event -->', $event);
    this.trigger = $event.option.viewValue;
  }
}

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" activeOption="activeOption">
      <mat-option *ngFor="let option of options" [value]="option" (onSelectionChange)="optionSelected($event)">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

<button (click)="setValue()">Set Value</button>

{{ trigger }}

Svar #1

Även om jag är lite sen till festen - ändå. Min metod baseras på Angular Material 15/16. Jag hittade frågan när jag sökte efter hur man markerar ett valt MatOption. Därför tänkte jag att min lösning kanske passar - om andra letar efter liknande lösningar.

Vad det löser:

  • välj ett alternativ i alternativlistan
  • Angular Material 15/16 markerar detta alternativ

Vad det INTE löser:

  • Utlös en händelse som kan bearbetas vidare

Tillvägagångssättet från @Sampgun utlöser en händelse men markerar inte nödvändigtvis valet. Vet inte om detta är ett fel i Material eller fungerar som avsett :-|

    @ViewChild(MatAutocomplete) myMatAutocomplete: MatAutocomplete;

    const selMatOption = this.myMatAutocomplete.options.toArray()
                             .find((o) => o.value === item2BeFount);
    selMatOption?.select();

Svar #2

Använd optionSelected-händelsen på mat-autocomplete så här:

html

<mat-autocomplete #autoCompleteUser="matAutocomplete" (optionSelected)="onSelectionChanged($event)">

typescript

onSelectionChanged(event: MatAutocompleteSelectedEvent) {
    console.log(event.option.value);
    [...]
}

Ta bort onSelectionChange-händelsen från mat-alternativ

Relaterade artiklar