绑定文本区域中的值答案

【问题标题】：Binding the value in a textarea绑定文本区域中的值
【发布时间】：2016-09-18 18:27:23
【问题描述】：

我正在尝试在 Angular2 中进行最简单的两种方式绑定。我想在我的组件和它的模板之间共享一个变量。

我的模板是：

<textarea [(ngModel)]="currentQuery"></textarea>

我的组件是：

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

@Component({
  moduleId: module.id,
  selector: 'vs-home',
  templateUrl: 'home.component.html'
})

export class HomeComponent {
    private currentQuery: string = '';
}

根据文档，这应该可以，但我得到了：

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'textarea'. ("
    <div class="query-bar-container">
        <textarea [ERROR ->][(ngModel)]="currentQuery"></textarea>
        <!-- <button type="button" class="btn btn-default" (click"): HomeComponent@2:15

【问题讨论】：

另见Can't bind to 'ngModel' since it isn't a known property of 'input'。

标签： angular typescript angular2-ngmodel

【解决方案1】：

@NgModule({
  ...
  imports: [
      /* BrowserModule or CommonModule */, 
      FormsModule /* or RectiveFormsModule */]
  ...
})

【讨论】：

谢谢，我已经在我的根目录app.module 中导入了它，我认为这对于整个应用程序来说已经足够了，但显然不是。
不，您需要在每个要使用其他模块指令的模块中使用它。（BrowserModule 仅适用于 app.module，CommonModule 适用于所有其他人）。在根模块中导入只提供一次服务但不为指令提供服务的模块就足够了。
从哪里导入浏览器模块？
@angular/platform-browser angular.io/docs/ts/latest/api/platform-browser/index/…
对我来说，BrowserModule 不起作用，但 FormsModule 也像 [this answer] 中提到的那样起作用。