MatAutocompleteまたはMdAutocomplete：入力内

Question

角度素材2 MdAutocomplete（またはMatAutocomplete）md-optionの中にある入力内に異なる検索語を入力するオプションをユーザに提供しようとしています。

現在のコード：

<md-autocomplete #auto="mdAutocomplete"> 
    <md-option disabled> 
    <md-icon>search</md-icon> 
    {{'WELCOME_WIZARD.SEARCH_FOR_A_DEV_TEAM' | translate}} 
    </md-option> 
    <md-option (click)="auto.showPanel"> 
    <span> 
     <md-form-field class="p-input-full-width p-select-adjusted"> 
     <input mdInput 
       name="searchTerm" ngModel 
       [formControl]="searchTeamCtrl" 
       placeholder="{{'WELCOME_WIZARD.SEARCH_START_TYPING' | translate}}" 
       aria-label="state"> 
     </md-form-field> 
    </span> 
    </md-option> 
    <md-option *ngFor="let team of foundTeams | async" [value]="team.name"> 
    <span>{{ team.name }}</span> 
    </md-option> 
    <md-option disabled> 
    <md-icon>star</md-icon> 
    {{'WELCOME_WIZARD.FAVORITES' | translate}} 
    </md-option> 
    <md-option *ngFor="let team of filteredTeams | async" [value]="team.name"> 
    <span>{{ team.name }}</span> 
    </md-option> 
</md-autocomplete> 

問題は、ユーザーが入力してオプションをクリックすると、オートコンプリートが閉じていることです。私はdisabledというパラメータをmd-optionに与えることでこれを回避することができましたが、もう1つの問題が発生します。入力がスペースキーに反応しなくなりました。

似たようなものをうまく統合できた人がいますか、あるいはスペースキーの解決策がありますか？

Answer 1

stopPropagation()は、入力をフォーカスするクリックイベントで呼び出すことができます。

<mat-option> 
    <input (click)="handleInputFocusClick($event)">= 
</mat-option> 

// ... 

handleInputFocusClick(event) { 
    event.stopPropagation(); 
} 

あなたはmat-optionでイベントハンドラに伝播する他のイベントをそらす場合は、同様の戦略を使用することができます。

https://stackblitz.com/edit/material2-beta12-jayo17?file=app/app.component.ts