angular material mat-select with mat-chip-list 通过 ENTER 而不是 DELETE 或 BACKSPACE 删除芯片

Question

我有一个包含 mat-select 并在 mat-chip-list 中显示值 select 的组件。我目前正在研究组件的可访问性。我收到的其中一项要求是允许使用 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

任何帮助将不胜感激。

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 solution demo

angular material 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

accessibility

angular-material

angular