マット選択でオートフォーカスを設定する方法

私のangular project have angular materialマテリアルを使用し、mat-selectを使用します。mat-selectは、私のケースではフォームの最初の要素です。は正常に読み込まれましたが、マットセレクトにオートフォーカスを設定できませんでした。マットセレクトにオートフォーカスを設定する方法を見つけるのを手伝ってください。

@ViewChild("name") nameField: ElementRef;

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

html

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

javascriptangulartypescriptangular-material

2019/02/08BlueCloud

あなたはOnInitに焦点を当てることができます

ts：

_ options2 = ['A', 'B'];

  @ViewChild('name')
  nameField: MdSelect;

  ngOnInit() {
    setTimeout(() => {
      this.nameField.open();
    }, 0);
  }
_

html：

_<div>
<md-select [(ngModel)]="nameField" #name>
    <md-option *ngFor="let option of options2" [value]="option.id">{{ option }}</md-option>
</md-select>
_

編集：申し訳ありませんが、_mat-select_および_md-select_からnativeElementを取得できないと思います。オブジェクトを取得してopen()を呼び出す必要があります。作業中のプロジェクトここではstackblitz

2019/02/08Gaspar

まず、ディレクティブを作成しましょうauto-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>

2019/08/29RahulD