Question

您如何关注ngIf内部的元素？

此ngIf在页面加载时为true，但仍会出现未定义的错误：

@ViewChild("currentDaySpentInput") currentDaySpentInput: ElementRef;  
// ...
<div class="spending-input" *ngIf="!spentInputComplete">
    <label>How much did you spend today?</label>
    <input [(ngModel)]="currentDay.spent" (keyup)="onKey($event)" #currentDaySpentInput>
</div>

焦点元素

ngOnOnit() {
    this.currentDaySpentInput.nativeElement.focus();
}

错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined

我尝试使用此question中建议的设置器，但没有用。

Answer 1

由于模板尚未呈现且您的undefined无法检测到其附件而无法启动，因此您在启动ViewChild的原因

要解决此问题，请在此处使用AfterViewInit，您的@ViewChild将得到解决，并将您的检查置于替代方法中

export class YourComponent implements AfterViewInit {
   @ViewChild() currentDaySpentInput: any;
   ngAfterViewInit(): void {
    // put your logic here
    console.log(this.currentDaySpentInput.nativeElement);
  }
}

Answer 2

ViewChild在AfterViewInit钩子之后可用，而不在Onit上可用，这就是您收到错误的原因。（https://alligator.io/angular/viewchild-access-component/）

@ViewChild("currentDaySpentInput") currentDaySpentInput: ElementRef; 
  ngAfterViewInit() {
    console.log(this.currentDaySpentInput.nativeElement.focus()); // mayo
  }

如果不能解决该问题，则必须查看代码。

ngIf中未定义的ViewChild

2 个答案: