Javascript 如何在mat select中设置自动对焦？

在我的角度项目中，使用“角度材质”并使用“材质选择”。Mat select是我的表单的第一个元素，在成功加载页面时设置自动聚焦，但我无法在Mat select上设置自动聚焦。任何人都可以帮我找到在mat select中设置自动对焦的方法

@ViewChild("name") nameField: ElementRef;

ngOninit() {
  this.nameField.nativeElement.focus();
} 

html

{{option.name}

您可以根据自己的项目调整此示例。点击按钮成为焦点

---

您可以将焦点调到

OnInit

ts:

html:

{{option}}

编辑：抱歉，我想您无法从

mat select

和

md select

获取nativeElement。您需要获取对象并调用

open（）

。

---

工作项目

尝试使用

viewChild

上的

MatSelect

访问聚焦属性，然后将其设置为true

<mat-form-field>
  <mat-select #mySelect [(ngModel)]="nameField">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }} 
    </mat-option>
  </mat-select>
</mat-form-field>

---

由于这是谷歌上出现的第一个热门产品，我将提供我的发现：

请注意，我这样做是专门针对

mat select

的，因为没有真正的内部html元素可以将引用附加到

我发现有效的方法是通过

view child

获取对元素的引用，然后调用

reference._elementRef.nativeElement.focus();

希望这至少对某人有所帮助：）

HTML:

{{item.name}

.ts: 确保导入MatSelect

从'@angular/material'导入{MatSelect}；

@ViewChild（'someRef'）someRef:MatSelect；
恩戈尼尼特（）{
如果（this.someRef）this.someRef.focus（）；
}

---

希望这有帮助。

首先，让我们创建指令 自动对焦.directive.ts

import { AfterContentInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
     selector: '[autoFocus]' }) export class AutofocusDirective implements AfterContentInit {

     public constructor(private el: ElementRef) {     
     }

     public ngAfterContentInit() {
         setTimeout(() => {
             this.el.nativeElement.focus();
         }, 500);
     }
}

接下来，我们需要告知AppModule此新指令存在，并通过更新app.module.ts声明其可用性：

@NgModule({
    declarations: [
        AutoFocusDirective
    ]
})

现在，您可以在组件模板中使用它： app.component.html

<div> Autofocus? <input appAutoFocus> </div>

自动对焦？

如果我理解正确，您希望将select元素集中在load上。如果是这种情况，那么您的代码是完美的，您只需要将焦点逻辑移入另一个生命周期事件，即

ngAfterViewInit

HTML:

---

找到工作演示。您可以看到“选择”高亮显示。注释ngAfterViewInit（）中的代码并查看此差异。

我们可以使用默认角度属性进行自动对焦

<mat-form-field>
    <mat-select formControlName="xyz" cdkFocusInitial>
        <mat-option value="abc">Abc</mat-option>
    </mat-select>
</mat-form-field>

Abc

[focused]=“true”

？为此，您必须使用指令。检查这个答案：可能重复的请包括你尝试过的代码，在这里的堆栈溢出。我仍然不明白你为什么选择我的答案并把问题放在里面。如果站点许可证允许，请在堆栈溢出上包含相关代码。您可能可以使用提供一个可运行的代码段。我已经尝试过这种方法，但它不起作用。它只对输入元素有效，不适用于mat SELECT。我已经尝试过这种方法，但它不起作用。它只对输入元素有效，不适用于mat SELECT。这是错误的AFAIK。它将样式设置为“聚焦”，但实际上不会聚焦元素！最好在

上添加一个真实的检查。在Angular 9上使用
ElementRef
的someRef

对我不起作用，但是

MatSelect

起了作用。谢谢。谢谢@Harshad vekariya，它工作得很好，正如预期的一样。它是如何为ngFor工作的。。我想关注0索引垫下拉警告：

cdkFocusInitial

本身不做任何事情。它只能在带有

cdkTrapFocus

指令的元素内工作。

import { AfterContentInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
     selector: '[autoFocus]' }) export class AutofocusDirective implements AfterContentInit {

     public constructor(private el: ElementRef) {     
     }

     public ngAfterContentInit() {
         setTimeout(() => {
             this.el.nativeElement.focus();
         }, 500);
     }
}

@NgModule({
    declarations: [
        AutoFocusDirective
    ]
})

<div> Autofocus? <input appAutoFocus> </div>

<mat-select #fff>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
</mat-select>

export class SelectOverviewExample  implements AfterViewInit{
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild("fff", {static: false}) nameField: ElementRef;

  ngAfterViewInit() {
    this.nameField.focused = true;
  }
}

<mat-form-field>
    <mat-select formControlName="xyz" cdkFocusInitial>
        <mat-option value="abc">Abc</mat-option>
    </mat-select>
</mat-form-field>