如何禁用md在角度4的键盘交互？

Question

在角度材料文档中，md-select具有键盘交互:向上箭头选择前一个选项，向下箭头选择下一个选项，空格/enter选择选项。我需要禁用这个键盘交互。有什么办法让它失效吗？

Answer 1

在md-option中添加(keydown)="$event.stopPropagation()"

<md-select placeholder="Favorite food" >
  <md-option *ngFor="let food of foods" [value]="food.value" 
             (keydown)="$event.stopPropagation()" >
    {{ food.viewValue }}
  </md-option>
</md-select>

链接到工作演示。

Answer 2

(角-v7及以上)：使用一个输入控件，这样我们就不需要改变角材料选择的内置行为，就像@RyanDiehl建议我们应该避免的那样。

注意:我添加这个答案是因为我相信，当有人想要添加过滤器或允许用户在选项中插入选项时，这种行为是必需的。因此，我冒昧地为像我这样有这种情况的其他开发人员添加了这个答案。

在input中，添加(keydown)="$event.stopPropagation()"

    <mat-form-field>
  <mat-select placeholder="Favorite food" multiple>
    <mat-form-field class="example-form-field">
      <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"
      (keydown)="$event.stopPropagation()">
      <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="save()">
        <mat-icon>done</mat-icon>
      </button>
    </mat-form-field>
    <mat-divider></mat-divider>
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{food.viewValue}} <span> <button mat-button matSuffix mat-icon-button aria-label="Clear"
          (click)="delete(food.value)"
           >
          <mat-icon>close</mat-icon>
        </button></span>
    </mat-option>
  </mat-select>
</mat-form-field>

链接到工作演示。

GitHub问题

Answer 3

对于建立在角度材料之上的库，您必须使用(keydown)="$event.stopImmediatePropagation()"。以下是对stopPropagation对stopImmediatePropagation的解释。

<custom-mat-select (keydown)="$event.stopImmediatePropagation()" multiple placeholder="Select ..." [(ngModel)]="selectedItems">
    <custom-mat-option *ngFor="let item of items" [value]="item.id">
        {{ item.name }}
    </custom-mat-option>
</custom-mat-select>