角 2 |打字稿 |将 span 的值绑定到文本框

Question

我有一个数组，我正在循环创建一个记录表。现在，对于表中的每一行，我都提供了一个“编辑”按钮和一个取消按钮。单击编辑按钮将显示填充有实际值的文本框，并为用户提供保存选项。单击取消按钮将折叠可编辑行并显示实际的表格行。 现在，我使用以下安排来促进这一点：

 <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow">
     <td>
         <span [hidden]="edit && i==selectedRow" [innerText]="item.firstName"></span>
         <span [hidden]="i!==selectedRow"><input type="text" #fn id="fn" name="fn" [value]="item.firstName"/></span>
     </td>

现在，问题： 1.我单击编辑按钮并对文本框值进行一些修改 - 2. 然后我点击取消按钮。 3. 我再次单击 EDIT 按钮。现在，我希望在文本框中看到实际数据。相反，我看到了修改后的值（按步骤 2）。

我希望每次单击编辑按钮时文本框的值都应始终刷新为该值。

编辑：我已经看到如果我不使用 [hidden]，而是使用

<span *ngIf="i==selectedRow"><input type="text" #fn id="fn" name="fn" [value]="item.firstName"/></span>

然后我可以重置文本框值，但是我无法访问 Typescript 文件中的文本框值。我像这样访问值文件：

<img (click)="updateContact(fn.value) .../>

编辑：更新了完整的表格：

<tbody>
                        <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow">
                            <tr><td>ass</td><tr>
                            <td>
                                <span *ngIf="i !== selectedRow" [innerText]="item.firstName"></span>
                                <span *ngIf="edit && i == selectedRow">
                                    <input (blur)="updateEditableValues(fn.value, undefined)" type="text" #fn [value]="item.firstName"/>                                     
                                </span>
                                <!--<input type="hidden" #firstName [(ngModel)]="firstNameVal" />-->
                            </td>
                            <td>
                                <span *ngIf="i !== selectedRow" [innerText]="item.lastName"></span>
                                <span *ngIf="edit && i == selectedRow" ><input (blur)="updateEditableValues(undefined, ln.value)" type="text" #ln value="{{item.lastName}}"/></span>
                                <!--<input type="hidden" #lastName [(ngModel)]="lastNameVal" />-->
                            </td>
                            <td>
                                {{item.email}}
                                <span [hidden]="true"><input  #email type="text" value="{{item.email}}"/></span>
                            </td>
                            <td>{{item.contactStatus}}</td>
                            <td>
                                <!--<a [hidden]="edit && i==selectedRow" href="javascript:void(0);" (click)="setClickedRow(i)">EDIT</a>-->
                                <img height="20" width="20" *ngIf="i !== selectedRow" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-64.png"
                                    (click)="setClickedRow(i)" />
                                <div *ngIf="edit && i == selectedRow" >
                                    <img (click)="updateContact(i, fn.value, ln.value)" height="20" width="20" src="https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/48/Dialog-Apply-48.png"
                                    />
                                    <img (click)="closeEdit()" height="20" width="20" src="https://cdn4.iconfinder.com/data/icons/common-toolbar/36/Cancel-48.png"
                                    />
                                </div>
                            </td>

                        </tr>
                    </tbody>

• 更新 2

  updateContact(rowIndex, firstName, lastName, email){
  
        alert(firstName)      
        alert(lastName)      
    this.data.forEach((item, index) => {
      if (item.email === email) {
        this.data[index].firstName = firstName;
        this.data[index].lastName = lastName;
        this.edit = false;
        this.selectedRow = -1;  
        return false;  
      } 
  
  });
  
  }
  

Answer 1

我稍微整理了你的代码。

    <tr *ngFor="let item of mf.data; let i = index" [class.active]="i === selectedRow">
         <td>
             <span *ngIf="!edit"> {{item.firstName}}> </span>
             <span *ngIf="edit && i===selectedRow">
                 <input type="text" #fn [value]="item.firstName"/>
                <button (click)="update(item.id, fn.value)"/> Save</button>
             </span>
         </td>
     </tr>
...

在 update() 中，您实际上更新了数组值。您需要 mf.data 中的 id 来识别它是哪一行：

    update(id, value)
    {
      this.edit=false;
      //something like this
      this.md.data[id].firstName=value;
    }

更新： 使用您更新的代码，它应该是：

<tbody>
           <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow">
               <td>
                   <span *ngIf="i !== selectedRow" [innerText]="item.firstName"></span>
                   <span *ngIf="edit && i == selectedRow">
                       <input (blur)="updateEditableValues(fn.value, true)" type="text" #fn [value]="item.firstName" />
                   </span>
                   <!--<input type="hidden" #firstName [(ngModel)]="firstNameVal" />-->
               </td>
               <td>
                   <span *ngIf="i !== selectedRow" [innerText]="item.lastName"></span>
                   <span *ngIf="edit && i == selectedRow">
                       <input (blur)="updateEditableValues(ln.value, false)" type="text" #ln [value]="item.lastName" />
                   </span>
                   <!--<input type="hidden" #lastName [(ngModel)]="lastNameVal" />-->
               </td>
               <td>
                   {{item.email}}
                   <span [hidden]="true">
                       <input #email type="text" [value]="item.email" />
                   </span>
               </td>
               <td>{{item.contactStatus}}</td>
               <td>
                   <!--<a [hidden]="edit && i==selectedRow" href="javascript:void(0);" (click)="setClickedRow(i)">EDIT</a>-->
                   <img height="20" width="20" *ngIf="i !== selectedRow" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-64.png"
                       (click)="setClickedRow(i)" />
                   <div *ngIf="edit && i == selectedRow">
                       <img (click)="updateContact(i, fn.value, ln.value)" height="20" width="20"
   src="https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/48/Dialog-Apply-48.png"
                       />
                       <img (click)="closeEdit()" height="20" width="20" src="https://cdn4.iconfinder.com/data/icons/common-toolbar/36/Cancel-48.png"
                       />
                   </div>
               </td>

           </tr>
   </tbody>

我更正了 updateEditableValues()，它将在第二个参数中采用布尔值，如果它是 true，它将是 firstnname，false lastname 将被更新。你需要纠正它。问题不重要，方式更优雅