Material2 사용 MdAutocomplete 구성 요소 - onselect 이벤트 사용 방법

Question

material2 베타 2에 대해 새로운 자동 완성 구성 요소를 사용하려고합니다. 구성 요소와 옵션 메뉴를 올바르게 렌더링 할 수는 있지만 방법을 알 수는 없습니다 내가

<md-input-container dividerColor="accent" [mdTooltip]="hint" mdTooltipPosition="above"> 
    <input mdInput [formControl]="selectedInput" [mdAutocomplete]="auto" placeholder="text"> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete"> 
    <md-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</md-option> 
</md-autocomplete> 

내 최종 목표는 내 구성 요소에 사용자가 목록에서 값을 선택 할 때마다 위치 변수라는 selectedItems를 채울 수있는 목록에서 옵션을 선택하면 작업을 프리폼 (여러 번 선택할 수 있습니다).

나는 그것이 MdAutocompleteTrigger와 관련이 있다고 생각하지만, 함께 연결할 수는 없다.

Answer 1

UPDATE 더 나은 솔루션이있다

:

당신은이에 대한 displayWith 사용할 수 있습니다

<md-autocomplete #appSearch="mdAutocomplete"> 
    <md-option *ngFor="let app of apps" [value]="app.name" (onSelectionChange)="onAppSelect(app)"> 
    {{ app.name }} 
    </md-option> 
</md-autocomplete> 

OLD : md-option의 onSelectionChange 이벤트를 사용

to bind이 함수는 필요하지 않지만 예제에서는 구성 요소 자체에 액세스하려고합니다. :)

// somethig is selected !! 
    displayFnProject(prj: any) { 
    console.log('selected', prj); 

    this.filteredOptions.next([]); // clear suggestions -> we do not want to show options if we already selected something ! :) 
    return prj ? prj.no : ''; // decide here what you want to display in that input-element ! 
    } 

라이브 데모 : 새로운 버전의 https://plnkr.co/edit/gzjx0ZS9wvw49LWY7THx?p=preview

Answer 2

는 자동 완성 구성 요소는 출력 optionSelected 있습니다.

<form> 
    <mat-form-field> 
     <input matInput placeholder="Select" [matAutocomplete]="auto" [formControl]="input"> 

     <mat-autocomplete (optionSelected)="someFn()" #auto="matAutocomplete"> 
      <mat-option *ngFor="let option of options" [value]="option"> 
       <span>{{option}}</span> 
      </mat-option> 
     </mat-autocomplete> 
    </mat-form-field> 
</form> 

그리고 입력

public input: FormControl = new FormControl(''); 

public someFn(): void { 
    const value = this.input.value; 
}