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