material 2 Autocomplete: chọn tùy chọn

Question

Tôi muốn gọi một chức năng khi một tùy chọn được chọn. Sau khi một số tìm kiếm nó có vẻ rằng tôi phải sử dụng:

tài sản optionSelections của MdAutocompleteTrigger

Trong tài liệu: https://material.angular.io/components/component/autocomplete optionSelections Suối các lựa chọn tùy chọn autocomplete.

Tôi không hiểu rằng, luồng là gì, cách triển khai điều này?

Answer 1

On md-tùy chọn mà bạn có thể thiết lập "onSelect"

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

Kể từ khi phiên bản beta 3, chức năng đã thay đổi:

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

Answer 2

tôi không thể có được câu trả lời "onSelect" đi với tài liệu góc cạnh mới nhất (2.0.0-beta.3). Nó không bao giờ được gọi.

Tôi thấy bây giờ mà nó là:

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

Nói cách khác, nó dường như được gọi là onSelectionChange bây giờ. Các tài liệu vẫn có vẻ mơ hồ và tiếp tục nói "Luồng các lựa chọn tùy chọn tự động hoàn thành" không thực sự có ý nghĩa gì cả.

Xem câu trả lời của Franceso, tuy nhiên đối với hầu hết các trường hợp, bạn sẽ cần phải vượt qua trong sự kiện $ để kiểm tra thông tin sự kiện.

Answer 3

Sự kiện onSelectionChange thay thế sự kiện selected vì giờ đây có thể phân biệt sự kiện khi mục được chọn hoặc không được chọn.

Cần phải chuyển tham số $event cho phương pháp đích để phân biệt giữa hai trường hợp, nếu không md-autocomplete sẽ gọi phương thức hai lần (một lần với mục được chọn mới và một lần với giá trị chưa được chọn/trước đó) . Nó sẽ là tốt đẹp mặc dù, rằng các tài liệu hướng dẫn sẽ được một chút rõ ràng hơn về những thay đổi này.

Dưới đây như thế nào để có được chỉ là "trên một số" sự kiện:

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> 

khiển

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

Answer 4

Các Chất liệu Autocomplet e thành phần có riêng sản lượng optionSelected sự kiện của nó:

mẫu:

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

Bộ điều khiển:

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

// ... 

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