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

【问题标题】：Angular Material Table: how to pass/submit selected rows upon button click?Angular Material Table：如何在按钮单击时传递/提交选定的行？
【发布时间】：2020-02-15 05:13:38
【问题描述】：

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

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

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

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

我的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);
  }

我确信有更好、更智能的方法可以做到这一点，但我找不到任何有用的资源来做到这一点，我们将不胜感激。

【问题讨论】：

您可以连续拥有一项。为什么要将其作为数组发送？或者你建立一个水平表？
因为我不确定除了将其附加到行数据对象数组（单击复选框时）之外，我如何知道选择了哪些行进行提交，然后在按钮提交时我将调用存储所选行的数组实例。这是我的表格的样例 (stackblitz.com/edit/angular-xmnbkz)。
@kaiilm 没关系，只是标题错误。
该死，我错了 2 大声笑。

标签： javascript angular typescript angular-material

【解决方案1】：

要一次获取所有选定的元素，您可以使用 SelectionModel

来自@angular/cdk/collections 的SelectionModel

我在这里创建了 stackblitz 看看这个https://stackblitz.com/edit/angular-jlk4vf-spkxv2

【讨论】：