Angular 2：点击输入框内按钮清空ngModel无效问题排查

看起来你遇到了Angular双向绑定在模板直接赋值后没更新视图的问题，我来帮你分析下可能的原因和解决办法：

可能的原因 #

1. 模板直接赋值的变更检测问题：Angular的变更检测机制在某些场景下（比如直接在模板中修改组件属性）可能不会及时捕捉到变化，尤其是当组件使用OnPush变更检测策略时，这种直接赋值的操作可能无法触发视图更新。
2. DOM元素交互的时序问题：当你点击glyphicon-remove元素时，可能因为元素的*ngIf依赖于searchClass的值，在赋值为空的瞬间，元素可能被立即销毁，导致后续的绑定更新没有被正确执行。

解决方法 #

方法1：将清空逻辑移到组件类中（推荐） #

不要在模板中直接修改组件属性，而是定义一个专门的清空方法，这样能确保Angular的变更检测正常触发：

首先在你的组件类中添加这个方法：

clearSearchClass(): void {
  this.searchClass = '';
}

然后修改模板中的点击事件绑定：

<div class="form-group has-feedback marginBottom10">
  <input type="text" id="searchInput" [(ngModel)]="searchClass" (keyup.enter)="searchSchemaClass(searchClass)" class="form-control" name="search" placeholder="{{ 'App.Labels.Search' | translate}}" />
  <span class="glyphicon glyphicon-remove form-control-feedback" *ngIf="searchClass" (click)="clearSearchClass()" ></span>
</div>

方法2：手动触发变更检测（如果使用OnPush策略） #

如果你的组件设置了changeDetection: ChangeDetectionStrategy.OnPush，可以注入ChangeDetectorRef来手动触发变更：

组件类中：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

clearSearchClass(): void {
  this.searchClass = '';
  this.cdr.detectChanges();
}

额外排查点 #

• 检查组件的name属性是否唯一：确保页面上没有其他name="search"的input元素，避免ngModel的命名冲突。
• 验证searchClass的初始化：确认组件类中searchClass被初始化为空字符串（searchClass = ''），而不是undefined或null，避免绑定异常。

这样修改后，点击清除按钮应该就能正常清空输入框了。

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