Angular中按钮与textarea的绑定及目标元素选择问题

问题分析 #

你原代码存在几个关键问题：

1. HTML语法错误：按钮的(click)事件未闭合引号，正确写法应为(click)="onclick($event)"
2. 事件目标错误：点击按钮时，$event.target指向的是按钮元素，而非textarea，无法通过这种方式获取textarea的值
3. 单向绑定局限：使用[value]="test"仅能实现从组件到视图的单向数据传递，无法反向同步

解决方案 #

方案1：通过模板引用变量获取textarea值

给textarea添加模板引用变量，点击按钮时直接传递该变量的值到方法中：

HTML代码：

<textarea [value]="test" #myTextarea></textarea>
<button (click)="onclick(myTextarea.value)">同步值</button>

TS代码：

test: string = '';

onclick(textareaValue: string) {
  this.test = textareaValue;
}

方案2：使用双向绑定ngModel（推荐）

Angular的双向绑定可以让组件属性和表单元素值实时同步，无需手动操作DOM：

HTML代码：

<textarea [(ngModel)]="test"></textarea>
<button (click)="onclick()">同步操作</button>

TS代码：

test: string = '';

onclick() {
  // 此时this.test已自动同步为textarea的当前值，可直接使用
  console.log(this.test);
}

注意：使用ngModel需要在对应模块中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule]
})
export class YourModule { }

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