working on a project

the third td of table can be modified

at present, it is no problem to press SAVE to change data after the modification is completed.

I don"t know how to close the edit box after pressing save

to open the edit box is to click edit to determine that idx = idx opens the modification box at the specified location

I want to press save and then close the edit box to display the original div

I set idx! = idx is useless

is there any solution

html

<table class="table container">
    <thead>
      <tr *ngFor="let row of list | slice:0:1">
        <th>{{row.text1}}</th>
        <th>{{row.text2}}</th>
        <th>{{row.text3}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of list | slice:1 ; let i=index" [attr.data-index]="i" [class.grayBg]="i % 2 == 0">
        <td>
          {{row.text1}}
        </td>
        <td>
          {{row.text2}}
        </td>

        <td>

          <div class="textWrap" *ngIf="this.i !== editRowId">
            <span>{{row.text3}}</span>
            <button (click)="edit(this.i)" class="btn btn-outline-danger edit-btn">Edit</button>
          </div>


          <div class="editWrap" *ngIf="this.i === editRowId">
            <input type="text" -sharpeditText class="form-control" [value]="row.text3">
            <a href="-sharp" (click)="save(this.i,editText.value)">Save</a>
            or
            <a href="-sharp" (click)="cancel()">cancel</a>.
          </div>
        </td>
      </tr>
    </tbody>
  </table>

js

  editRowId = "";

  edit(val){
     //open edit
    this.editRowId = val;

  }

  save(val,editText){
    this.list[val+1].text3 = editText;
    //close edit
    this.editRowId != val;
  }

is about to do this
http://plnkr.co/edit/lXq1WB?p.