如何使用打字稿獲取div內文本框的值？

Question

我有我這樣的HTML。

<div id="series1"> 
    <div class="col-md-6"> 
     <label for="Mark">Mark</label> 
     <input type="text" id="mark" class="shortTextbox" (blur)="signalSelected('mark')" /> 
    </div> 
</div> 

我想獲得在文本框中輸入的標記值的值。這個html代碼重複了我的按鈕點擊。每次點擊該按鈕時id都會更改爲series2和series3等等。

目前打字稿文件我正在像價值

var val = (<HTMLInputElement>document.getElementById(selection)).value 

但是，這不會給我選擇相應的系列ID值。可否請您提供如何讓基於ID（系列1，系列2）商標價值...

Answer 1

您可以使用ngModel

<input type="text" [(ngModel)]="myFieldInComponentClass" 

如果你有一個字段myFieldInComponentClass像

class MyComponent { 
    myFieldInComponentClass:String; 

只要輸入值發生變化（也相反），該字段將賦值。

你可以把它的getter/setter對改變執行代碼

private _myFieldInComponentClass:String; 
    set myFieldInComponentClass(value :String) { 
    this._myFieldInComponentClass = value; 
    // other code 
    } 
    get myFieldInComponentClass() { 
    return this._myFieldInComponentClass; 
    } 

Answer 2

只是在你的input field和名稱添加[(ngModel)]="mark"， 你的HTML組件可能是這樣的：

<div id="series1"> 
    <div class="col-md-6"> 
     <label for="Mark">Mark</label> 
      <input type="text" id="mark" class="shortTextbox" [(ngModel)]="mark" (blur)="signalSelected('Mark')" name="mark" /> 
     </div> 
</div> 

並在你的component.ts中定義一個變量，然後得到它是這樣的值：

... 
mark: string; 

signalSelected (markVal: string){ 
    markVal = this.mark 
    console.log(markVal); // it is the value 
}