버튼을 클릭했을 때 다른 요소의 값/ID를 얻는 방법

Question

angular2를 사용하여 간단한 응용 프로그램을 만들었습니다. 내 응용 프로그램에서 테이블에는 일부 레코드가 표시됩니다. 사용자가 레코드 중 하나를 선택하면 해당 필드를 편집 할 수 있으며 그 옆에 표시된 단추는 제목을 '저장'에서 '삭제'로 변경합니다.

내 구성 요소 HTMLs 코드 :

<div class='row' *ngFor = 'let question of questionList; let i = index'> 
    <div class='col-lg-1 col-xs-1'> 

    </div> 
    <div class='col-lg-10 col-xs-10'> 
     <div class='row question-content-row'> 
      <div class='col-lg-1 col-md-1 col-sm-1 col-xs-2'> 
       <span>{{i+1}}</span> 
      </div> 
      <div class='col-lg-10 col-md-10 col-sm-9 col-xs-6'> 
       <span class='questionLabel' contenteditable='true' (click)="userWnatsToEditQuestion($event.target)" (blur) = "editQuestionEnds($event.target)" >{{question.questionText}}</span> 
      </div> 
      <div class='col-lg-1 col-md-1 col-sm-2 col-xs-4'> 
       <button (click) = "deleteQuestion(question.id,i)" >{{actionButtonTitle}}</button> 
      </div> 
     </div> 
    </div> 
    <div class='col-lg-1 col-xs-1'> 

    </div> 
</div> 

방법은 내 구성 요소

private deleteQuestion(questionId:String,index:Number) 
    { 
    console.log("question id to be deleted--"+questionId+"asd"+index); 
    } 

    private userWnatsToEditQuestion(element) 
    { 
    element.textContent = "Save"; 
    } 

    private editQuestionEnds(element) 
{ 
    element.textContent = "Delete"; 
} 

내가 특정 버튼의 텍스트를 변경하는 방법을 모르는에 있습니다. 그리고 사용자가 저장 버튼을 클릭하면 특정 범위의 텍스트를 어떻게 얻을 수 있습니까?

Answer 1

코드가 questionList 가정

아래에 부착되어 있습니다 :

this.questionList = [{ 
    questionText: 'What?', 
    btnTitle: 'Delete' 
}, { 
    questionText: 'When?', 
    btnTitle: 'Delete' 
}] 


<div class='row' *ngFor = 'let question of questionList; let i = index'> 
    <div class='col-lg-1 col-xs-1'> 

    </div> 
    <div class='col-lg-10 col-xs-10'> 
     <div class='row question-content-row'> 
      <div class='col-lg-1 col-md-1 col-sm-1 col-xs-2'> 
       <span>{{i+1}}</span> 
      </div> 
      <div class='col-lg-10 col-md-10 col-sm-9 col-xs-6'> 
       <div *ngIf="question.btnTitle === 'Save'"> 
        <span (blur)="editQuestionEnds(i)"> 
         <input type="text" [(ngModel)]="question.questionText" /> 
        </span> 
       </div> 

       <div *ngIf="question.btnTitle === 'Delete'"> 
        <span (click)="userWnatsToEditQuestion(i)"> 
         {{question.questionText}} 
        </span> 
       </div> 

      </div> 
      <div class='col-lg-1 col-md-1 col-sm-2 col-xs-4'> 
       <button (click)="deleteQuestion(i)" >{{question.btnTitle}}</button> 
      </div> 
     </div> 
    </div> 
    <div class='col-lg-1 col-xs-1'> 

    </div> 
</div> 


private deleteQuestion(index) { 
    let quesObj = this.questionList[index]; 
    // here you can fetch questionText in quesObj ['questionText'] way 
} 

private userWnatsToEditQuestion(index) { 
    this.questionList[index]['btnTitle'] = 'Save'; 
} 

private editQuestionEnds(element) { 
    this.questionList[index]['btnTitle'] = 'Delete'; 
} 

Answer 2

질문 목록

this.questionList=[{"id":1,"questionText":"what","action":"delete"}, 
{"id":2,"questionText":"when","action":"delete"}, 
{"id":3,"questionText":"how","action":"delete"}] 

Here is the plunker