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">

然后点击索引进行编辑：

<-- 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;
}

请注意，在这两种解决方案中，您都无法同时编辑多行。

Angular 2中的属性绑定

1 个答案: