materiał 2 Autouzupełnianie: wybierz opcję

Question

Chcę wywołać funkcję, gdy wybrana jest opcja. Po pewnym poszukiwań wydaje się, że muszę używać:

nieruchomość optionSelections z MdAutocompleteTrigger

W dokumentacji: https://material.angular.io/components/component/autocomplete optionSelections Stream od wyboru opcji autouzupełniania.

Nie rozumiem tego, czym jest strumień, jak to zrealizować?

Answer 1

Na MD-opcji można ustawić "onSelect"

<md-autocomplete #auto="mdAutocomplete"> 
    <md-option (onSelect)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option> 
</md-autocomplete> 

Ponieważ beta 3, funkcjonalność uległa zmianie:

<md-autocomplete #auto="mdAutocomplete"> 
    <md-option (onSelectionChange)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option> 
</md-autocomplete> 

Answer 2

nie mogłem dostać odpowiedź "onSelect" będzie z najnowszy kanciasty materiał (2.0.0-beta.3). Nigdy nie został wywołany.

jestem znalezieniem teraz, że jest to:

<md-option *ngFor="let item of item" [value]="item.name" (onSelectionChange)="myChangeFunc($event, item)"> 
    {{ item.name }} 
    </md-option> 

Innymi słowy wydaje się być teraz nazywa onSelectionChange. Dokumenty nadal wydają się niejasne i nadal mówią "strumienie autouzupełniania opcji", które tak naprawdę nic nie znaczą.

Zobacz także odpowiedź Franceso, jednak w większości przypadków trzeba zdać $ wydarzenie, aby sprawdzić informacje o wydarzeniu.

Answer 3

Zdarzenie onSelectionChange zastąpiło zdarzenie selected, ponieważ obecnie możliwe jest rozróżnienie zdarzenia, gdy element jest zaznaczony lub niezaznaczony.

Konieczne jest podanie parametru $event do metody docelowej w celu rozróżnienia obu przypadków, w przeciwnym razie md-autouzupełnianie wywoła metodę dwukrotnie (raz z nową wybraną pozycją i raz z niezaznaczoną/poprzednią wartością) . Byłoby jednak miło, gdyby dokumentacja była nieco bardziej przejrzysta w odniesieniu do tych zmian.

Poniżej jak dostać tylko "o wybierz" imprezy:

Template

<md-autocomplete #panel="mdAutocomplete" [displayWith]="displayFn"> 
    <md-option (onSelectionChange)="selected($event, country)" 
      *ngFor="let country of filteredCountries | async" [value]="country"> 
    <div class="selector-elements"> 
     {{ country.name }} 
     </div> 
</md-option> 

Controller

selected(event: MdOptionSelectionChange, country: ICountry) { 
    if (event.source.selected) { 
     this.propagateChange(country); 
    } 
} 

Answer 4

Materiałowych Autocomplet komponent e posiada własne wyjście optionSelected zdarzeń:

Szablon:

<mat-autocomplete (optionSelected)="onSelectionChanged($event)"> 
    <mat-option *ngFor="let item of myItems" [value]="item"> 
    {{ item }} 
    </mat-option> 
</mat-autocomplete> 

Kontroler:

import { MatAutocompleteSelectedEvent } from '@angular/material'; 

// ... 

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