Question

我有一个Angular 2应用，它使用Material 2 table来显示项目及其数据。我在每行的右侧有一个按钮，允许用户编辑该行。此切换编辑按钮会弹出input s，并填充该行的值。输入的值使用value="{{row.property}}"设置。

我可以使用[（ngModel）] =＆＃34; row.property＆＃34;填充input的值并让模型绑定到该对象，但我不想要这样，因为我希望用户能够取消进行更改。如果input绑定到对象，即使用户单击＆＃34;取消＆＃34;，模型也会更改。

因此，设置value="{{row.property}}"是我想要的，但是当我点击＆＃34;保存＆＃34;时，我不知道如何检索input的值。按钮。

＆＃13;

<mat-table #table [dataSource]="dataSource" matSort>

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Season Column -->
  <ng-container matColumnDef="season">
    <mat-header-cell *matHeaderCellDef class="padding-a-5" mat-sort-header> Season </mat-header-cell>
    <mat-cell *matCellDef="let row" class="padding-a-5">
      <span *ngIf="!editingRow(row)"> {{row.season}} </span>
      <input *ngIf="editingRow(row)" value="{{row.season}}" class="padding-a-5 half-width">
    </mat-cell>
  </ng-container>

  <!-- Item Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef class="mat-column-itemName padding-a-5" mat-sort-header> Item Name </mat-header-cell>
    <mat-cell *matCellDef="let row" class="mat-column-itemName">
      <span *ngIf="!editingRow(row)"> {{row.name}} </span>
      <input *ngIf="editingRow(row)" [(ngModel)]="row.name" class="padding-a-5 half-width">
    </mat-cell>
  </ng-container>

  <!-- Toggle Edit Row Column -->
  <ng-container matColumnDef="toggleEdit">
    <mat-header-cell *matHeaderCellDef class="mat-column-row-actions"></mat-header-cell>
    <mat-cell *matCellDef="let row" class="toggle-edit mat-column-row-actions">
      <button *ngIf="!editingRow(row)" mat-button (click)="editRow(row, true)" aria-label="edit">
        <mat-icon aria-hidden="true">mode_edit</mat-icon>
      </button>

      <button *ngIf="editingRow(row)" mat-button (click)="saveRow(row)" aria-label="save">
        <mat-icon aria-hidden="true">save</mat-icon>
      </button>
      <button *ngIf="editingRow(row)" mat-button (click)="editRow(row, false)" aria-label="cancel">
        <mat-icon aria-hidden="true">cancel</mat-icon>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

＆＃13;

  // some of the methods in my Angular 2 component
  
  editingRow(row) {
    return this.editRows[row.id];
  }

  editRow(row, editRow: boolean) {
    this.toggleEditMode(row.id, editRow);
  }

  saveRow(row): void {
    this.toggleEditMode(row.id, false);
    console.log(row);
    // TODO
    // save(row);
  }

  toggleEditMode(rowId: number, editMode: boolean): void {
    this.editRows[rowId] = editMode;
  }

＆＃13;

Answer 1

在编辑时，存储对象的现有状态，如果取消，则将其设置回原始

public function edit(item: YourClass) {
    this.OriginalItem = item;
    this.isEditing = true;
}

public function cancel(index: number) {
   this.MyListOfItems[index] = this.OriginalItem;
   this.isEditing = false;
}

如何阅读材料2表中的值？

1 个答案: