Javascript @隐藏窗体上的ViewChild返回未定义-如何访问它以便设置焦点

我有一个窗体，它只有在单击按钮时才可见。我希望用户单击按钮，并在表单显示后将焦点放在第一个输入字段上

使用@Viewchild我无法执行此操作，因为当组件首次加载时表单不可用。我收到错误

无法读取未定义的属性“nativeElement”

TS

formLoaded = false;

@ViewChild("firstName") nameField: ElementRef;
editName(): void {
 this.formLoaded = true;
 this.nameField.nativeElement.focus();
}

HTML

<button mat-raised-button color="primary" (click)="editName()">Edit</button>
 <div *ngIf="formLoaded" class="group">
  <mat-form-field>
   <input #firstName matInput>
  </mat-form-field>
</div>

编辑

我如何访问输入#firstName，以便对其进行聚焦

---

我的实际代码的简化版本是。

将焦点方法isnide settimeout包装如下：

 editName(): void {
        this.formLoaded = true;
        setTimeout(()=>{
          this.nameField.nativeElement.focus();
        })
     }

另一种方法是使用setter

@ViewChild("firstName",{read:MatInput}) set viewC(nameField: MatInput){
 if(nameField){
    nameField.focus();
 }
};

利用生命周期挂钩，每次触发更改检测时都会运行它。因此，只有在表单出现在模板上之后，才能为其设置焦点

ngAfterViewChecked() {
   if (this.formLoaded) {
      this.nameField.nativeElement.focus();
   }
}

从editName方法中删除focus语句：

---

由于您将模板引用放置在matInput上，因此它可能引用matInput引用。请尝试将viewchild显式设置为引用如下@viewchild（“firstName”，{read:ElementRef}）nameField:ElementRef；如果您在控制台上打印什么？@ViewChild（“firstName”，{read:MatInput}）nameField:MatInput；另一种方法是获取matInput实例并对matInput focus方法进行utlize，您能试试这个吗？然后在editForm方法内部调用如下：this.nameField.focus（）；另一种方法是将setter与viewchild@viewchild（“firstName”，{read:MatInput}）一起使用，设置viewC（nameField:MatInput）{if（nameField）{nameField.focus（）；}console.log（nameField）；}；是的，我用ngAfterViewChecked和setTimeout的组合实现了它。在没有超时的情况下，我得到了“ExpressionChangedTerithasBeenCheckedError”，我还将static更改为false，作为@Viewchild的第二个参数。

@ViewChild("firstName") nameField: ElementRef;
editName(): void {
   this.formLoaded = true;
}