Angular 12中输入框输入时如何显示指定div（*ngIf失效）

你的代码不生效有3个核心问题：

• 显隐逻辑冲突：Clear按钮的div同时绑定了*ngIf="isClearShown"和[hidden]="isClearShown"，两个指令绑定同一个布尔值时，*ngIf为true渲染元素的瞬间，[hidden]也会为true给元素加上display: none样式，按钮永远无法显示。
• 无状态更新逻辑：输入框没有绑定任何输入事件，你定义的isClearShown变量初始值为false后就不会再变动，无法随用户输入切换状态。
• 模板重复定义：代码里写了两个带相同#inputSearch模板引用的搜索输入框，会引发模板引用冲突，后续如果要通过模板变量拿输入框值会直接报错。

第一种：模板传值实现（写法更简洁，无需额外装饰器） #

组件TS代码 #

// 原有变量保留，初始值符合空输入时隐藏按钮的需求
isClearShown: boolean = false;

// 监听输入事件，更新按钮显隐状态
onSearchInput(inputValue: string): void {
  // 输入内容去空格后非空时显示按钮，否则隐藏
  this.isClearShown = inputValue.trim().length > 0;
}

// 清空搜索逻辑
clearSearch(inputEl: HTMLInputElement): void {
  inputEl.value = '';
  this.isClearShown = false;
  // 此处可追加清空后需要触发的搜索重置、接口请求等逻辑
}

模板HTML代码 #

删掉重复的输入框，移除冲突的[hidden]绑定，给输入框加事件绑定：

<input 
  type="search" 
  class="search-field" 
  #inputSearch 
  (input)="onSearchInput(inputSearch.value)"
  placeholder="Search networks, applications, and more" 
  name="s" 
/>
<div (click)="clearSearch(inputSearch)" *ngIf="isClearShown" class="clear">Clear</div>

第二种：ViewChild获取元素实现（适合需要在TS中频繁操作输入框的场景） #

组件TS代码 #

import { ViewChild, ElementRef } from '@angular/core';

isClearShown: boolean = false;
@ViewChild('inputSearch') inputSearch!: ElementRef<HTMLInputElement>;

onSearchInput(): void {
  const inputValue = this.inputSearch.nativeElement.value.trim();
  this.isClearShown = inputValue.length > 0;
}

clearSearch(): void {
  this.inputSearch.nativeElement.value = '';
  this.isClearShown = false;
  // 追加自定义业务逻辑
}

模板HTML代码 #

<input 
  type="search" 
  class="search-field" 
  #inputSearch 
  (input)="onSearchInput()"
  placeholder="Search networks, applications, and more" 
  name="s" 
/>
<div (click)="clearSearch()" *ngIf="isClearShown" class="clear">Clear</div>

注意：*ngIf和[hidden]都可以实现元素显隐控制，二选一即可，不要同时绑定相同判断逻辑的变量。前者会直接销毁/重建DOM元素，后者只是通过CSS样式控制显示隐藏，按需选择即可。

内容的提问来源于stack exchange，提问作者MikeTab