angular10 - 单击事件时，textarea 字段应为空

Question

我是 Angualr 的新用户，目前正在使用 Angular 10。我希望在单击清除按钮后textarea 字段应该为空。但是这段代码没有我想做的工作。有一天可以帮助我。谢谢。

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 = '';
  }
}

Answer 1

相信绑定可以解决这个问题。

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

我相信 ts 可以保持不变。

您应该研究一种方式和两种方式的绑定

Answer 2

这个问题的解决方案：

<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>