Angular Material Table：如何在单击按钮时传递/提交选定的行？

Question

有一个类似的问题How to pass selected row value of table to button click event - Material design - Angular 6，但是我没有找到对我的案例有帮助的解决方案。

我正在使用 Angular Material 表来显示我的数据，我在每行数据旁边都选中了复选框。

我想要实现的是用户应该能够选择所需的行，并且在按钮提交时，所有选定的行都将传递到后端进行处理。现在我的方法是单击复选框时，它将调用(click)="onSelectCheckbox(row)"my 中的一个函数component.ts并将该行附加到数组中，当用户取消选择该行时，它将触发相同的函数并将行对象删除.filter()。

如果我以相对正常的速度单击复选框，这工作正常，但是当我以更快的速度反复单击不同的复选框时，逻辑开始出错。在按钮提交时，我的控制台显示被取消选择的行仍在数组中，而被勾选的行不在数组中。

我有这个复选框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>

以及onSelectCheckbox(row)我component.ts和我的按钮中的逻辑来测试并在我的控制台中显示选定的行：

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 的选择模型在这里我创建了 stackblitz 检查这个https://stackblitz.com/edit/angular-jlk4vf-spkxv2