angular 材料 mat-select with mat-chip-list 通過 ENTER 而不是 DELETE 或 BACKSPACE 刪除芯片

Question

我有一個包含 mat-select 並顯示 mat-chip-list 中選擇的值的組件。 我目前正在研究組件的可訪問性。 我收到的要求之一是允許使用Enter原位或除Delete和Backspace之外的方式移除墊屑。 我檢查了 Angular Material 的文檔，我發現只是： 消除
允許以編程方式移除芯片。 當按下 DELETE 或 BACKSPACE 鍵時由 MatChipList 調用。 通知刪除請求的所有偵聽器。 不從 DOM 中移除芯片。

<mat-form-field>
  <mat-label>Choose Colors</mat-label>
  <mat-select [formControl]="colorsControl" multiple>

    <mat-option *ngFor="let color of colorsList" [value]="color">{{color}}</mat-option>
  </mat-select>
</mat-form-field>
    <div>
      <mat-chip-list>
        <mat-chip *ngFor="let color of colorsControl.value"
          [removable]="true" (removed)="onColorRemoved(color)" (keydown.enter)="onColorRemoved(color)">
          {{ color }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </div>
<br/>

StackBlitz 演示

任何幫助將不勝感激。

Answer 1

最后，我找到了解決問題的簡單方法：通過在 mat-chip 上添加 keydown 事件：

 <mat-chip *ngFor="let color of colorsControl.value"
          [removable]="true" (removed)="onColorRemoved(color)" (keydown.enter)="onColorRemoved(color)">
          {{ color }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>

StackBlitz 解決方案演示