Javascript 单击按钮时如何获取其他元素的值/id

我用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>

我不知道如何更改特定按钮的文本。当用户单击“保存”按钮时，如何获取特定跨度的文本。

代码附在下面

假设问题列表为：

 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';
 }

问题清单

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

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