单击事件中的textarea字段应为空

问题描述

我是Angualr的新用户，目前正在使用Angular10。我希望 textarea字段在单击 clear 按钮后应该为空。但是此代码无法正常运行。某天可以帮助我。 谢谢。

HTM文件

<button (click)="ClearField()" type="button">clear field</button> 
<textarea class="form-control  rows=10 cols=50 cstm-textarea" #box (keyup)="OnUpdateTextArea(box.value)">
</textarea>

.ts文件

export class AppComponent {
  
  str = '';

  OnUpdateTextArea(value: string) {
    this.str = value;
    console.log("text area value:",this.str);
    
  }

  ClearField() {
    this.str = '';
  }
}

解决方法

相信绑定可以解决此问题。

<button (click)="ClearField()" type="button">clear field</button> 
<textarea [(ngModel)]="str" class="form-control  rows=10 cols=50 cstm-textarea">
</textarea>

我相信可以保持不变。

您应该查看one way and two way binding

,

此问题的解决方案：

<button (click)="ClearField(box)" type="button">clear field</button> 
<textarea class="form-control  rows=10 cols=50 cstm-textarea"  #box (keyup)="OnUpdateTextArea(box.value)">
</textarea>