Angular 2 中的属性绑定答案

【问题标题】：Property Binding in Angular 2Angular 2 中的属性绑定
【发布时间】：2019-12-09 21:37:44
【问题描述】：

我正在尝试在 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);
}

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

【问题讨论】：

这是预期的行为。如果你想让它通用，你可以遍历 row 的属性并以这种方式设置它们。或者更好的是，您可以在编辑时创建一个新行，并在保存时替换原始行。

标签： angular inline-editing

【解决方案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;
}

请注意，在任一解决方案中，您都会遇到同时编辑多行的问题。

【讨论】：