타이프 스크립트 파일에 각도 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를 입력 필드의 값을 얻는 방법 (항목, 난) 함수가 실행되며, 어떻게 이것을 가능하게 할 수 있습니까? 값의 입력 필드를 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

먼저 다음 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

당신은 다음과 같은 코드를 사용할 수 있습니다

가 당신이 순서 app.modules.ts에 FormsModule를 가져올 필요의

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

Answer 3

value는 [(ngmodel)]

field.use 입력을 사용하여이 구성 요소의 속성입니다 <input type="text" class="myCl" [(ngmodel)]="value[i]" >

GET 입력 필드의 값과 겨 모델 방법으로 배열의 값을 저장 후

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

이미이 시도