Angular 4双向数据绑定变量访问及textarea值获取问题

嘿，我来帮你搞定这两个Angular 4的问题哈！

1. 如何在Angular 4中实现双向数据绑定，访问模型/视图变量？ #

在Angular 4里，双向数据绑定主要靠[(ngModel)]指令来实现，不过有个关键前提：你得先在组件所属的模块中导入FormsModule，不然ngModel会直接失效哦。

具体步骤如下：

• 首先在你的模块（比如AppModule）里导入FormsModule：

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

@NgModule({
  imports: [
    // 其他已有的导入项
    FormsModule
  ]
})
export class AppModule { }

• 接着在组件类中定义需要绑定的模型变量：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  comment: string = ''; // 定义要绑定的模型变量
}

• 最后在模板里用[(ngModel)]把视图元素和模型变量绑定，这样视图的输入会同步到模型，模型的更新也会实时反映到视图：

<textarea [(ngModel)]="comment" placeholder="Add Comment"></textarea>

2. 点击按钮获取textarea的值 #

看了你现有的代码，目前用的是单向插值{{comment}}，这种写法只能把模型值显示到textarea，没法把用户的输入反向同步到模型里。咱们调整一下就能轻松拿到值：

修改后的HTML代码： #

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-12">
      <textarea class="form-control" [(ngModel)]="comment" placeholder="Add Comment"></textarea>
      <button (click)="addComment()" style="margin-top: 2%" class="btn-success">Add Comment</button>
    </div>
  </div>
</div>

对应的组件代码： #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  comment: string = '';

  addComment() {
    // 直接访问this.comment就能拿到textarea的当前输入值
    console.log('用户输入的评论:', this.comment);
    // 这里可以添加你的业务逻辑，比如提交评论
    // 想要清空输入框的话，直接给this.comment赋值为空即可
    this.comment = '';
  }
}

为啥这么改？因为[(ngModel)]已经帮我们完成了textarea输入和组件变量comment的双向同步，点击按钮时直接访问组件内的变量就能拿到最新值，完全不需要通过$event或者传参数，代码更简洁直观~

如果非要保留传参的写法，也可以这么做：

<button (click)="addComment(comment)" ...>Add Comment</button>

然后组件里的方法：

addComment(commentValue: string) {
  console.log('用户输入:', commentValue);
}

不过还是更推荐直接用组件变量的方式，更符合Angular的数据流设计理念哦。

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