当我试图清除文本字段时,为什么这个方法不起作用?

<div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
</div>


export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = '';
  }
}

我期待的是:因为我正在传递一个属性作为搜索值,当我点击按钮时,它应该会得到更新后的值,并在clearSearch()函数中处理.

我还注意到,如果我将默认值设置为searchValueclearSearch()函数可以工作,但只能工作一次.

请给我check my plunker美元.

推荐答案

1. First Method

您必须在此处指定null或空字符串

this.searchValue = null;
//or
this.searchValue = ' ';

Working Plunker

因为Angular 变化检测没有触发任何事件.因此您必须指定一些值,可以是NULL,也可以是带空格字符串

2. Second Method

  • 使用[(ngModel)]应该与ngModel一起使用.

为什么?

因为正如您使用value属性进行的绑定一样,这只是属性绑定,而不是事件绑定.所以 因为没有激发与Angular 相关的事件,所以Angular 不会运行更改检测.如果您绑定到事件,则Angular 运行更改检测,并且绑定起作用,值应该是更改的.

参见与ngModel相同的工作示例

Working Example with ngModel

Angular相关问答推荐

接收错误NullInjectorError:R3InjectorError(_AppModule)[config—config]....>过度安装Angular—Markdown—Editor

路由在全局导航中总是给我/甚至使用相对路径

Angel Project Build从Angel 8升级后,从12MB增加到90MB

崩溃Angular项目Docker容器

RxJS如何按顺序进行POST请求,只有在前一个完成后才会触发新的请求?

Angular 13 Sass 模块无法在编译中正确导入文件

如何使用ngrx和effects 订阅成功回调

Observable.forkJoin 和数组参数

更改 Select 选项时获取当前值

Angular 5 Mat-grid 列表响应式

当父组件上的变量发生变化时重新加载子组件

如何从组件模板将数组作为 Input() 传递?

Angular 2 单元测试 - @ViewChild 未定义

Angular 5 响应式表单 - 单选按钮组

Angular 2 应用程序中没有Access-Control-Allow-Origin标头

Angular 2 Material Design 组件是否支持布局指令?

*ngIf 带有多个异步管道变量

有条件地将 RouterLink 或其他属性指令添加到 Angular 2 中的元素

无法绑定到 target,因为它不是div的已知属性

Angular CLI 为已经存在的组件创建 .spec 文件