角度材料 mat-select with mat-chip-list 通过 ENTER 而不是 DELETE 或 BACKSPACE 删除芯片答案

【问题标题】：angular material mat-select with mat-chip-list remove chip by ENTER instead of DELETE or BACKSPACE角度材料 mat-select with mat-chip-list 通过 ENTER 而不是 DELETE 或 BACKSPACE 删除芯片
【发布时间】：2021-08-13 18:25:49
【问题描述】：

我有一个组件，它包含一个 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 demo

任何帮助将不胜感激。

【问题讨论】：

标签： angular angular-material accessibility

【解决方案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 solution demo

【讨论】：