如何将输入的值传递给 html 中的事件调用？

Question

I need to pass the value of my input to a variable which then I can used for my button (click).

My html

<p class="mgRight">Second: <input type="number" min="1" value="10"/></p>
<button class="mgRight" type="button" (click)="callOnce(x)">Active Once After...</button>

My ts

callOnce(x) {
    var url = "api/url/" + x;
    var xmlHttp = new XMLHttpRequest();    
    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);
    return xmlHttp.responseText;

  }

Answer 1

You need to bind your input to some property in the typescript.

html

<input type="number" min="1" value="10" [(ngModel)]="myProperty" />

ts

myProperty: number;

callOnce() {
  var url = "api/url/" + this.myProperty;
  var xmlHttp = new XMLHttpRequest();    
  xmlHttp.open("GET", url, false);
  xmlHttp.send(null);
  return xmlHttp.responseText;
}

This is just one way of doing it. You should also look into HttpClient for making xhr requests.

Edit: myProperty (or whatever you call it) could also be a number if you are binding to a number input. Ultimately, it's a pure number anyway, because the javascript doesn't care about the "type" in your typescript.

Answer 2

If you don't want to store the value, you can even do the following

<input #yourInput type=“text”>

<button (click)=“callOnce(yourInput.value)”>

Creating a variable in the template and accessing to his value