angular - 如何在 typescript 文件Angular 4中获取输入字段的值

Question

 <div id="lists">
            <table id='mytable' cellspacing='0' cellpadding='0'>
                <tr  class="row" [ngClass]="{'selected': i === selectedIndex}"  *ngFor= 'let item of list; let i = index' [attr.data-index]='i'  [ngStyle]="{'background-color': i%2 == '0' ? 'gray' : ''}">
                    <td class='default-field'>
                        <p class='para' *ngIf="selectedIndex!=i  ">{{i+1}}. {{item}}</p>
                    </td>
                    <td class="edit-field" *ngIf="selectedIndex==i   " >
                        <input type="text" class="myCl" [value]="val" >
                    </td>
                    <td class='btns'>

                    <input type='button' value='edit' class='edit-btn'  (click)='hidePara(item,i)' *ngIf="selectedIndex!=i">

                    <input type='button' value='save' class='save-btn' *ngIf="selectedIndex==i" (click)='hidePara1(item,i)'> 
                    <input type='button' value='DELETE' class='delete-btn' (click)='deleterow(i)'>
                    </td>
                </tr>
            </table>

        </div>

上面是我的 html 代码，我想在用户点击保存按钮时检索输入字段的值，hidePara1(item,i) 函数将执行，我想获取 hidepara1 中输入字段的值，这怎么可能。

 hidePara1(item,ii)
 {
  this.selectedIndex=-1;
  this.showHideP = !this.showHideP;  //for hiding paragraph
  this.tbox = !this.tbox;  //showing text box
  this.edt=!this.edt;  //hide edt button
  this.sbtn = !this.sbtn;  //display save button 

 }

Answer 1

首先，您需要在 app.modules.ts 中导入 FormsModule 才能使用 ngModel

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

然后你可以使用[(ngModel)]获取.ts文件中的值

HTML:

<input type="text" [(ngModel)]="inputText">

TS:

inputText :string = "I am sample text";

您的代码变为:

 <div id="lists">
            <table id='mytable' cellspacing='0' cellpadding='0'>
                <tr  class="row" [ngClass]="{'selected': i === selectedIndex}"  *ngFor= 'let item of list; let i = index' [attr.data-index]='i'  [ngStyle]="{'background-color': i%2 == '0' ? 'gray' : ''}">
                    <td class='default-field'>
                        <p class='para' *ngIf="selectedIndex!=i  ">{{i+1}}. {{item}}</p>
                    </td>
                    <td class="edit-field" *ngIf="selectedIndex==i   " >
                        <input type="text" class="myCl" [value]="val" [(ngModel)]="item.inputText">
                    </td>
                    <td class='btns'>

                    <input type='button' value='edit' class='edit-btn'  (click)='hidePara(item,i)' *ngIf="selectedIndex!=i">

                    <input type='button' value='save' class='save-btn' *ngIf="selectedIndex==i" (click)='hidePara1(item,i)'> 
                    <input type='button' value='DELETE' class='delete-btn' (click)='deleterow(i)'>
                    </td>
                </tr>
            </table>

        </div>