无法访问 *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() 中使用 this.searchValue.nativeElement。 原因是当 TempComponent 加载时 searchValue 输入不在 DOM 作为 displaySearch strong> 当时是 false。在 displaySearch 变为 true 之后，您应该使用 nativeElement。 如下更改您的代码。

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

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

    },3000);
  }

Answer 2

这是意料之中的。

ngAfterViewInit 将在视图初始化后立即运行。只有在单击搜索链接后，您的 searchValue 模板变量才会出现。而在ngAfterViewInit 方法中，您正在尝试读取nativeElement 的某些内容，而此时该内容尚未定义。

因此错误。

更新：

通过读取来自 @ViewChild 的数据，您给自己带来了不必要的困难。

使用事件绑定语法在input 字段上监听keyup 事件怎么样：

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

你会得到onKeyUp方法中的值。

注意： Vega 建议的解决方案也是一个很好的解决方案。但它不会很好地扩展。因为ngAfterViewChecked 方法在每个变更检测周期都会被调用。所以我不建议使用它。

---

这里有一个Working Sample StackBlitz 供您参考。