單擊按鈕時如何獲取其他元素的值/編號

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