如何访问 angular 4 中的模型或视图变量以进行双向数据绑定

Question

我想通过按钮点击触发的按钮点击功能访问组件 class 中 textarea 的值。
HTML

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-12">

        <textarea class="form-control" placeholder="Add Comment">
         {{comment}}
        </textarea>
      <button (click)="addComment($event, comment)" style="margin-top: 2%" class="btn-success">Add Comment</button>
    </div>
  </div>
</div>

分量：

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

@Component({
  selector: 'app-add-comments',
  templateUrl: './add-comments.component.html',
  styleUrls: ['./add-comments.component.css']
})
export class AddCommentsComponent implements OnInit {

  comment:string = "Hellooooo";


  //commentsArr: commentsArr[];

  addComment(event, comment);

  addComment(event, comment)
  {
    console.log(this.comment);


  }

  constructor() { }

  ngOnInit() {
  }

}

我想访问评论组件内的评论数据。

Answer 1

您应该在文本区域上使用属性出价，而不是直接使用 comment。一个例子：

<form (ngSubmit)="formHandler()" #form="ngForm">
    <textarea 
      name="your-name"
      [(ngModel)]="comment">
    </textarea>
    <button (click)="addComment()">
</form>

然后在 addComment() 上使用 this.comment 访问它的值。 ngModel 将在用户在文本区域内键入时自动更新属性 comment 的值。

Answer 2

方法一

您可以像 #comment 一样将输入字段设置为模板变量，并可以在单击时将值传递给方法。例如

<input type="text" #comment>
<button (click)="addComment(#comment.value)">Add Comment</button>

您的 addComment 方法将是

addComment(comment){
console.log(comment)
}

您的代码将是

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

添加评论

addComment(comment)
  {
    console.log(comment);
  }

方法二

@Treeindev 分享

<form (ngSubmit)="formHandler()" #form="ngForm">
    <textarea 
      name="your-name"
      [(ngModel)]="comment">
    </textarea>
    <button (click)="addComment()">
</form>

方法 3

@Dheeraj Kumar 分享

<textarea class="form-control" [(NgModel)]=comment placeholder="Add Comment">
<input type="button" value="Add" (click)="AddComment()" />

comment:any="";

AddComment(){

console.log(this.comment);
}

Answer 3

Angular2+中没有作用域变量。

在 Angular 2+ 中有 NgModel 可以帮助您进行双向绑定。

https://angular.io/api/forms/NgModel

访问组件中文本区域的值。

在html

<textarea class="form-control" [(NgModel)]=comment placeholder="Add Comment">
<input type="button" value="Add" (click)="AddComment()" />

在组件中：

comment:any="";

AddComment(){

console.log(this.comment);
}

此处的注释变量将始终映射到 textarea 中的输入。

Answer 4

你可以试试这个

HTML:

<textarea [(ngModel)]='myText'></textarea>
<button (click)="doSomething()">Click</button>

TS：

doSomething(){
   console.log(this.myText);
}

Answer 5

我们可以使用双向绑定或者@ViewChild从模板中获取元素的引用。

Live Demo

TS :

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  comment:string = "Hellooooo";
  @ViewChild('textAreaRef') myLocalRef; //Here we create a marker in the element and refer the element using @ViewChild and assigning it to myLocalRef
  addComment()
  {
    console.log(this.myLocalRef.nativeElement.value);
  }
}

模板：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <textarea 
        class="form-control" 
        placeholder="Add Comment"
        #textAreaRef>
        {{comment}}
      </textarea>
      <hr>
      <button (click)="addComment()" style="margin-top: 2%" class="btn-success">Add Comment</button>
    </div>
  </div>
</div>

Answer 6

From Angular 2+ the support of $scope has been removed, so when you want to access an element defined on a template into the TS file, this can be done in 3 ways:

 1. Local Reference
 2. @ViewChild
 3. Two-way binding

When you just want to pass the value on some action without binding then #1 and #2 is the option, or we can define a variable in TS file and bind it to an element in the template file using two-binding.

    enter code here

**1. Example using Local Reference:**
**Template:**
 <textarea #textAreaRef>{{comment}}</textarea>
 <button (click)="addComment(textAreaRef)">Add Comment</button>

**TS:**
 addComment(value:HTMLTextAreaElement)
  {
    console.log(value);
  }

**2. Example using @ViewChild and Local Reference:**
**Template:**
 <textarea #textAreaRef>{{comment}}</textarea>
 <button (click)="addComment()">Add Comment</button>

**TS:**
@ViewChild('textAreaRef') referenceEl: ElementRef;
 addComment()
  {
    console.log(referenceEl.nativeElement.value);
  }
Here we don't need to pass the local reference on button click.

**3. Example using Two-way data binding:**
**Template:**
 <textarea [(ngModel)]='comments'>{{comments}}</textarea>
 <button (click)="addComment()">Add Comment</button>

**TS:**
comments: string = "";

 addComment()
  {
    console.log(this.comments);
  }

如何访问 angular 4 中的模型或视图变量以进行双向数据绑定

how to access model or view variable in angular 4 for two way data binding

angular

angular4-forms