角度 2 中的属性绑定

Question

我正在尝试在 Angular 2 应用程序中对表格数据创建内联编辑功能。每行显示一个编辑图标，用于切换内联编辑器。编辑时，应该有两个按钮，一个用于取消，另一个用于保存行。

目前，我在取消编辑时尝试恢复到以前的状态时遇到问题。有关详细信息，请参阅下面的示例代码。

打字稿：

interface IRow {
id: number;
foo: string;
bar: string;
baz: string;
isEditing: boolean;
}

模板：

<div class="table">
<div class="table-head">
<div class="table-row">
<div class="table-cell">Foo</div>
<div class="table-cell">Bar</div>
<div class="table-cell">Baz</div>
<div class="table-cell"><!-- Edit --></div>
</div>
</div>
<div class="table-body">
<div *ngFor="let row of rows" class="table-row">
<-- Show this if not editing -->
<ng-container *ngIf="!row.isEditing; else editing">
<div class="table-cell">{{ row.foo }}</div>
<div class="table-cell">{{ row.bar }}</div>
<div class="table-cell">{{ row.baz }}</div>
<div class="table-cell">
<button (click)="edit(row)>
<i class="icon-pencil"></i>
</button>
</div>
</ng-container>
<!-- Show this if editing -->
<ng-template #editing>
<div class="table-cell"><input type="text" [(value)]="row.foo"></div>
<div class="table-cell"><input type="text" [(value)]="row.bar"></div>
<div class="table-cell"><input type="text" [(value)]="row.baz"></div>
<div class="table-cell">
<button (click)="cancel(row)>
<i class="icon-back"></i>
</button>
<button (click)="save(row)>
<i class="icon-save"></i>
</button>
</div>
<ng-template>
</div>
</div>
<div>

元件：

// Class variable
public originalRow;
edit(row) {
// Save a copy of the original
this.originalRow = { ...row };
this.row.isEditing = true;
}
cancel(row) {
// This doesn't work
// row = this.originalRow; 
// This works
row.foo = this.originalRow.foo;
row.bar = this.originalRow.bar;
row.baz = this.originalRow.baz;
this.row.isEditing = false;
}
save(row) {
// Store new value in state
this.originalRow = row;
// Post update
this.rowSvc.updateRow(row);
}

在取消编辑时将数据恢复到以前的状态的最佳策略是什么？

Answer 1

这是预期的行为。当您设置row时，您只是覆盖参数并丢失对象引用。

首先设置索引：

<div *ngFor="let row of rows; let i = index" class="table-row">

然后 pas 索引来编辑功能：

<-- Show this if not editing -->
<ng-container *ngIf="!row.isEditing; else editing">
<div class="table-cell">{{ row.foo }}</div>   <div class="table-cell">{{ row.bar }}</div>
<div class="table-cell">{{ row.baz }}</div>
<div class="table-cell">
<button (click)="edit(row, i)> <-- Pass the index -->
<i class="icon-pencil"></i>
</button>
</div>
</ng-container>

在取消函数中使用索引将行设置为原始状态：

cancel(row: IRow, index: number) {
this.rows[index] = { ...this.originalRow };
this.row.isEditing = false;
}

---

另一种选择是简单地迭代row的属性：

cancel(row: IRow) {
Object.keys(row).forEach((key: string) => row[key] = this.originalRow[key]);
this.row.isEditing = false;
}

---

请注意，无论哪种解决方案，同时编辑多行都会遇到问题。