无法访问* ngIf中的模板引用变量

Question

我在屏幕快照中显示以下错误。

当我单击搜索链接时，我正在显示搜索输入，我正在使用keyup事件从输入中获取值。但是得到的错误显示在屏幕截图中。 我正在使用角度6。

组件

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-temp',
  templateUrl: './temp.component.html',
  styleUrls: ['./temp.component.css']
})
export class TempComponent implements OnInit, AfterViewInit {
  displaySearch = false;
  @ViewChild('searchValue') searchValue: ElementRef;
  constructor() { }

  ngOnInit() {
  }

   searchFunc() {
      if (this.displaySearch === false) {
          this.displaySearch = true;
      } else if (this.displaySearch === true){
          this.displaySearch = false;
   }

}

  ngAfterViewInit() {
    fromEvent(this.searchValue.nativeElement, 'keyup').pipe(
      map((event: any) => {
        return (event.target).value;
      })
    ).subscribe(res => {
      console.log(res);
    });
  }
}

  

HTML

<div>
  <a href="javascript:void(0)" (click)="searchFunc()">Search</a>
</div>

<ng-container *ngIf="displaySearch">
  <input type="text" name="searchValue" #searchValue>
</ng-container>

Answer 1

这是预料之中的。

ngAfterViewInit将在视图初始化后立即运行。仅在单击“搜索”链接后，您的searchValue模板变量才会显示。在ngAfterViewInit方法中，您尝试读取nativeElement上当时未定义的内容。

出现错误。

更新：

通过读取@ViewChild中的数据，您自己变得不必要地困难。

如何使用事件绑定语法仅监听keyup字段上的input事件：

<div *ngIf="displaySearch">
    <input 
    type="text" 
    name="searchValue" 
    (keyup)="onKeyUp($event.target.value)" />
</div>

然后您将通过onKeyUp方法获得该值。

注意：Vega建议的解决方案也是一个很好的解决方案。但这不会很好地扩展。由于ngAfterViewChecked方法在每个更改检测周期都被调用。因此，我不建议您使用它。

---

  

这是您推荐的Working Sample StackBlitz。

Answer 2

您不能在 this.searchValue.nativeElement 中使用 ngAfterViewInit() 。 原因是当 TempComponent 正在加载 searchValue 时，输入不在 DOM 中，作为 displaySearch 当时是 false 。 nativeElement 成为 displaySearch 后，您应该使用 true 。 如下更改代码。

   searchFunc() {
    this.displaySearch = true;
    setTimeout(() => {

    fromEvent(this.searchValue.nativeElement, 'keyup').pipe(
      map((event: any) => {
        return (event.target).value;
      })
    ).subscribe(res => {
      console.log(res);
    });

    },3000);
  }