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 解决方案演示