在做一个项目

table的第三个td点击编辑后可以修改

目前做到修改完成 按SAVE后去改data都没问题

就卡在按save后不知如何关掉编辑框

打开编辑框　是点击edit后判断idx = idx 打开指定位置的修改框

我想要按save后 关闭编辑框 显示原本的div

我設idx != idx没用　

有什么解法吗

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" #editText class="form-control" [value]="row.text3">
            <a href="#" (click)="save(this.i,editText.value)">Save</a>
            or
            <a href="#" (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;
  }

大概就是要做成这样
http://plnkr.co/edit/lXq1WB?p...