属性绑定在 Angular 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">

然后将索引传递给编辑函数：

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

Property Binding in Angular 2

inline-editing

angular

属性 绑定在 Angular 2

Property Binding in Angular 2

inline-editing

angular

属性绑定在 Angular 2