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

首先，您需要在FormsModule中导入app.modules.ts才能使用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>

Answer 2

您可以使用以下代码：

 <td class="edit-field" *ngIf="selectedIndex==i" >
      <input type="text" class="myCl" [(ngModel)]="val" >
 </td>

Answer 3

value是此组件的属性，使用输入字段.use [(ngmodel)]

<input type="text" class="myCl" [(ngmodel)]="value[i]" >

从输入字段获取值并通过ng模型方法存储数组的值然后单击保存按钮传递数组valy和参数以保存

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

如何在打字稿文件中获取输入字段的值Angular 4

3 个答案: