Question

我正在尝试以编程方式集中处理select上的angular元素。这是我的代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('microwaveRef') microwaveElement: ElementRef
this.microwaveElement.nativeElement.focus()

在HTML端：

<mat-form-field class='login-full-width'>
    <mat-label>Microwave</mat-label>
    <mat-select #microwaveRef [formControl]="microwaveFormControl" required>
        <mat-option *ngFor="let option of microwave" [value]="option">
            {{option}}
        </mat-option>
    </mat-select>
    <mat-error *ngIf='microwaveFormControl.hasError("required")'>
        Please select an option for the Microwave field
    </mat-error>
</mat-form-field>

这在文本输入字段中效果很好，但是在选择时我收到此错误：

ERROR TypeError: Cannot read property 'focus' of undefined

任何帮助将不胜感激

Answer 1

它是未定义的，因为nativeElement上不直接存在mat-select。一种替代方法是使用focused上的mat-select属性并将其设置为true：

this.microwaveElement.focused = true

我提供了一个Stackblitz示例来演示这一点。

编辑：

实际上，mat-select本身具有focus()功能，因此您可以使用：

this.microwaveElement.focus();

甚至：

this.microwaveElement.open();

角度关注选择元素

1 个答案:

编辑：