Question

我使用angular2做了一个简单的应用程序。在我的应用程序中在表格中显示了一些记录。当用户选择任何记录时，该特定字段是可编辑的，并且其旁边显示的按钮将其标题更改为“保存”。来自＆＃39;删除＆＃39;。

我的组件HTML代码：

   <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

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

2 个答案: