如何在角度材料表（mat-table）中實現編輯、更新和丟棄功能

Question

我想在角度材料表中實現編輯、更新和丟棄功能。 我知道如何編輯和更新表格行，但不知道如何丟棄表格行。

請點擊鏈接stackblitz 鏈接到表格，看看我做了什么。 如果您知道如何實現丟棄功能，請幫助我，任何幫助將不勝感激，我不知道如何保留數據單元格的初始值。 即使我試圖保留原始數據的副本，以便當他們點擊丟棄按鈕時，我可以將復制的數據移動到表的特定行。 但是由於 2 路數據綁定它直接更新到原始數據（我的意思是公司詳細信息數組，它是后端的響應），我不知道它如何反映和影響原始數據。 這是我在這里面臨的一件奇怪的事情，請幫助我，我需要提前得到這個答案。

Answer 1

您可以將表單字段的 ngModel 切換到臨時工作副本。 如果用戶隨后丟棄，您只需要刪除工作副本並再次顯示原始內容。 另一方面，如果用戶想要保存，我們 Object.assign 對表數據的更改。

請參閱此處： https : //stackblitz.com/edit/angular-material-starter-njrnu9?file=app/app.component.ts

這個解決方案並不完美，但也許它可以引導您朝着正確的方向前進。

Answer 2

編輯時制作元素的副本。 那么你有兩種方法：

1.- 您將 [ngModel] 與副本一起使用，並在更新中分配值

2.-您將 [ngModel] 與元素一起使用並取消分配復制值

要進行復制，您需要使用擴展運算符，進行“復制”，而不是將同一對象分配給兩個變量

this.oldValue={...element}

好。 您需要選擇是否可以一次編輯多行或僅編輯一行。 我認為它更精確地一次只編輯一行（但這只是一種意見），所以首先，如果一行是否處於編輯模式，而不是在數組中，您可以使用唯一的變量editIndex

  editIndex:number=-1;
  editCompanyDetails(details,i) {
    this.editIndex=i;
  }

我選擇編輯“復制”，所以我聲明了一個變量newValue

  newValue:any;
  editCompanyDetails(details,i) {
    this.editIndex=i;
    this.newValue={...details}
  }

看看我們如何使用擴展運算符制作副本

有一個問題，我們不能在編輯模式和只讀模式下使用相同的 mat-form 字段。 MatTable 不允許我們做一些像：

  <!-- this NOT WORK -->
  <input matInput placeholder="{{element.companyName}}"
             [(ngModel)]="editIndex==i?newValue.companyName:element.companyName"
             ...>

因此，我們需要“重復”表單字段，一個使用元素，一個使用 newValue。

      <ng-container matColumnDef="companyName">
        <mat-header-cell *matHeaderCellDef> Company Name </mat-header-cell>
        <mat-cell *matCellDef="let element;let i = index">

          <!--this only show is editIndex!=i-->
          <mat-form-field *ngIf="editIndex!=i" floatLabel="never" [appearance]="'none'">
            <input matInput placeholder="{{element.companyName}}"
 [(ngModel)]="element.companyName"
         [readonly]="true">
         </mat-form-field>

          <!--this only show is editIndex==i-->
          <mat-form-field *ngIf="editIndex==i" floatLabel="never" [appearance]="'legacy'">
            <input matInput placeholder="{{element.companyName}}"
 [(ngModel)]="newValue.companyName"
         >
          </mat-form-field>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
        <mat-cell *matCellDef="let element;let i = index">

          <!--this only show is editIndex!=i-->
          <mat-form-field *ngIf="editIndex!=i" floatLabel="never" [appearance]="'none'">
            <input matInput [(ngModel)]="element.status" [readonly]="true" >
          </mat-form-field>

          <!--this only show is editIndex==i-->
          <mat-form-field *ngIf="editIndex==i" floatLabel="never" [appearance]="'legacy'">
            <input matInput [(ngModel)]="newValue.status"  >
          </mat-form-field>
        </mat-cell>
      </ng-container>

功能更新和取消變得像

  updateCompanyDetails(i){
    this.dataSourceCompanyDetails.data[i]={...this.newValue}
    this.editIndex=-1;
  }

  discardCompanyDetails(){
    this.editIndex=-1;
  }

你可以在這個分叉的stackbliz中看到

注意：在這種方法中，如果您正在編輯一個字段並嘗試編輯另一個字段，則更改是松散的。 Perhasf 是時候了，在編輯函數中檢查是否 editIndex!=-1 詢問您是否要取消更改（而不是在 stackblitz 中）

  editCompanyDetails(details,i) {
    if (this.editIndex!=i && this.editIndex!=-1)
    {
       //get the element we are "editing"
       const data=dataSourceCompanyDetails.data[this.editIndex]
       if (data.status!=this.newValue.status || data.companyName!=this.newValue.companyName){
         ..ask if you want to loose the changes..
       }
    }
       if (this.newValue.
    this.editIndex=i;
    this.newValue={...details}
  }

更新y 我們采取另一種方法聲明一個變量 olValue 並使用 ViewChild 獲取表 - 是對 renderRows 的必要調用 y 取消編輯。

@ViewChild('table') table:MatTable<any>
oldValue:any;

並將功能更改為

  editCompanyDetails(details,i) {
    this.editIndex=i;
    this.oldValue={...details}
  }

  updateCompanyDetails(){
    this.editIndex=-1;
  }

  discardCompanyDetails(i){
    this.dataSourceCompanyDetails.data[i]={...this.oldValue}
    this.editIndex=-1;
    this.table.renderRows()
  }

好吧，更改 [NgModel]="newElement.company bt [ngModel="element.company"。我很着急，但是這種方法可以使用唯一的 formField，在 stackblitz 中我留下了兩個 formField

查看新的堆棧閃電戰

Answer 3

如果您想正確實現丟棄功能，我們有一種方法，而不是遵循 2 路數據綁定，我們可以遵循反應式表單並可以創建表單數組。 下面是我的解決方案。 帶丟棄函數的表