Angular 角度2 |类型脚本|将跨度值绑定到文本框
我有一个数组，我正在循环创建一个记录表。现在，对于表中的每一行，我都提供了一个“编辑”按钮和一个“取消”按钮。单击编辑按钮将显示用实际值填充的文本框，并为用户提供保存选项。单击CANCEL按钮将折叠可编辑行并显示实际的表格行。 现在，我使用以下安排来促进这一点：Angular 角度2 |类型脚本|将跨度值绑定到文本框,angular,typescript,binding,Angular,Typescript,Binding,我有一个数组，我正在循环创建一个记录表。现在，对于表中的每一行，我都提供了一个“编辑”按钮和一个“取消”按钮。单击编辑按钮将显示用实际值填充的文本框，并为用户提供保存选项。单击CANCEL按钮将折叠可编辑行并显示实际的表格行。 现在，我使用以下安排来促进这一点： <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow"> <td> <
<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>
- 我把你的代码整理了一下
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;
}
});
}
update(id, value)
{
this.edit=false;
//something like this
this.md.data[id].firstName=value;
}
{{item.email}
{{item.contactStatus}
我更正了updateEditableValues（），它将在第二个参数中采用布尔值，如果为true，则将更新FirstName和false lastname。你需要纠正它。这对于这个问题并不重要，但更优雅的方式是你能为同样的问题提供一个plunker吗？我认为你需要删除或编辑ass，因为它从未关闭过，还有什么是“updateEditableValues（fn.value，undefined）”？value=“{item.lastName}”和value=“{{item.email}”是不正确的，在updateContact中，fn不可访问或未定义。我不使用@Viewchild。我还用updateContact（）No.的代码更新了原来的帖子。它是可访问的。从中删除*ngIf条件的那一刻起，我就可以访问fn。我现在可能已经了解了发生的事情，或者至少部分了解了发生的事情。ngIf从DOM中删除元素。因此它可能无法访问。但我不明白为什么，因为按钮和输入具有相同的ngif条件，所以两者都存在。你可以尝试用[hidden]重新替换ngIf，因为它不会从DOMBravo中删除！我很高兴你完成了这件事，也很高兴我能帮助你！我真的很喜欢，非常欢迎：）
<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>
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;
}
});
}
<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(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>