Angular 材料表：如何在按鈕單擊時傳遞/提交選定的行？

Question

有一個類似的問題How to pass selected row value of table to button click event - Material design - Angular 6 ，但是我沒有找到對我的案例有幫助的解決方案。

我正在使用 Angular 材料表來顯示我的數據，我在每行數據旁邊都有 select 復選框。

我想要實現的是用戶應該能夠 select 所需的行，並且在按鈕提交后，所有選定的行都將傳遞到后端進行處理。 現在我的方法是，當單擊復選框時，它將在我的component.ts和 append 中調用 function (click)="onSelectCheckbox(row)"到數組，當用戶取消選擇該行時，它將觸發相同的 ZC1C425268E68385D1AB5074C17A94F14D並通過.filter()刪除行 object 。

如果我以相對正常的速度單擊復選框，這工作正常，但是當我以更快的速度反復單擊不同的復選框時，邏輯開始搞砸了。 在按鈕提交時，我的控制台顯示取消選擇的行仍在數組中，而勾選的行不在數組中。

我的mat-table中有這個復選框：

<ng-container matColumnDef="select">
     <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
       <mat-checkbox (click)="onSelectCheckbox(row)" (change)="$event ? selection.toggle(row) : null"
         [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
       </mat-checkbox>
     </td>
</ng-container>
.
.
.
<button class="btn btn-primary" (click)="openSubmitConfirmation()">Submit</button>

和我的component.ts中的onSelectCheckbox(row)邏輯以及我的按鈕來測試並在我的控制台中顯示選定的行：

selectedPayment = new Array<Payment>();

onSelectCheckbox(row: Payment) {
    if (this.selectedPayment === undefined || this.selectedPayment.length === 0) {
      this.selectedPayment.push(row);
    } else if (this.selectedPayment.includes(row)) {
      this.selectedPayment = this.selectedPayment.filter(
        x => x.payment_reference !== row.payment_reference);
    } else {
      this.selectedPayment.push(row);
    }
  }

openSubmitConfirmation() {
    console.log(this.selectedPayment);
  }

我確信有更好、更聰明的方法可以做到這一點，但我找不到任何有用的資源來做到這一點，任何指導都將不勝感激。

Answer 1

要一次獲取整個選定元素，您可以使用 SelectionModel

來自 @angular/cdk/collections 的 SelectionModel

在這里我創建了 stackblitz 檢查這個https://stackblitz.com/edit/angular-jlk4vf-spkxv2