我需要使输入元素可聚焦.我的意思是,用户应该能够使用这个字段来筛选只使用键盘的值. 我添加了tabindex,但它的行为很奇怪.

https://stackblitz.com/edit/angular-db2km6-5a83e7?file=src%2Fapp%2Fselect-multiple-example.html

任何帮助都将不胜感激.

推荐答案

TLDR: Check this working example which lets you write and search just after the select is focused by using the TAB key.

mat-select组件只关注元素,它不输入,也不打开内部搜索字段来过滤它的值.

要实现这一点,您需要手动完成.我提供的Working stackblitz example中的主要更改如下:

HTML:

<!-- 1. Added the id #field to reference the component later -->
<!-- 2. Added event `openAndSearch(field, multiUserSearch)` to fix the logic for the expected focus -->
<mat-select
  #field
  multiple
  [formControl]="providers"
  (openedChange)="onOpenChange(multiUserSearch)"
  (focus)="openAndSearch(field, multiUserSearch)"
>...</..>

TS:

/**
 * Method to be executed when focus is triggered
 **/
openAndSearch(field: MatSelect, input: HTMLInputElement) {
  // Open and show the list of options
  field.open();
  // Focus the search input so the user can type directly
  setTimeout(() => { // <-- inside timeout to wait for the overlay to show up
    input.focus();
  }, 10);
}

Angular相关问答推荐

从嵌套组件导航到命名路由中的顶级路由

PrimeNG侧栏清除primeNG消息.为什么?

单元测试 case 模拟store 中的行为主体

如何跨不同组件使用ng模板

Sass-Loader中出现分号错误:ANGLE应用程序的缩进语法中不允许使用分号

ANGLING:ExpressionChangedAfterChecked在嵌套形式中由子项添加验证器

在Angular 17的本地服务应用程序时禁用SSR

是否可以在Angular(12+)中迭代指定的范围而不是整个数组

Angular 15 Ref 错误:初始化前无法访问组件 A

NGX-Translate如何不得到404?

Angular 等待对话框未显示

TypeError:this.restoreDialogRef.afterClosed 不是函数

有条件地取消所有内部可观察对象或切换到仅发出一个值的新对象

Angular2 测试 - 按 ID 获取元素

Angular 4 - 在下拉列表中 Select 默认值 [Reactive Forms]

Angular2:如果 img src 无效,则显示占位符图像

在 Angular 中动态设置样式

Angular 2 更改事件 - 模型更改

如何在Angular中使用带有 td 属性 colspan 的属性绑定?

如何使用 @ngrx/store 获取 State 对象的当前值?