Question

ngIf 中未定义的 ViewChild

2019-01-11

5454

angular

如何聚焦 ngIf 中的元素？

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

@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

我尝试使用此问题中建议的 setter，但没有起作用。

Answer 1

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

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

它应该修复此问题，如果这不能解决问题，则必须查看代码。

Answer 2

启动时出现 undefined 的原因是因为模板尚未呈现，并且您的 ViewChild 无法检测到其与视图的附件

要解决此问题，请使用 AfterViewInit ，此处的 @ViewChild 将被解析，并将检查放入覆盖方法中

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