[英]Angular Material Table: how to pass/submit selected rows upon button click?
There is a similar question How to pass selected row value of table to button click event - Material design - Angular 6 , however I don't find the solutions there helpful to my case.有一个类似的问题How to pass selected row value of table to button click event - Material design - Angular 6 ,但是我没有找到对我的案例有帮助的解决方案。
I'm using Angular Material table to display my data, I have select checkbox beside each row of data.我正在使用 Angular 材料表来显示我的数据,我在每行数据旁边都有 select 复选框。
What I'm trying to achieve is that user should be able to select the desired rows and upon button submission, all of the selected rows will be passed to the backend for processing.我想要实现的是用户应该能够 select 所需的行,并且在按钮提交后,所有选定的行都将传递到后端进行处理。 Right now my approach is when the checkbox is clicked it will call a function
(click)="onSelectCheckbox(row)"
in my component.ts
and append that row to an array, when the user deselect the row it will trigger the same function and drop the row object by .filter()
.现在我的方法是,当单击复选框时,它将在我的
component.ts
和 append 中调用 function (click)="onSelectCheckbox(row)"
到数组,当用户取消选择该行时,它将触发相同的 ZC1C425268E68385D1AB5074C17A94F14D并通过.filter()
删除行 object 。
This is working fine if I'm clicking the checkbox on a relatively normal pace, however the logic starts screwing up when I repeatedly click different check boxes on a faster pace.如果我以相对正常的速度单击复选框,这工作正常,但是当我以更快的速度反复单击不同的复选框时,逻辑开始搞砸了。 On button submission, my console shows rows that are deselected are still in the array and rows that are ticked are not in the array.
在按钮提交时,我的控制台显示取消选择的行仍在数组中,而勾选的行不在数组中。
I have this checkbox in my mat-table
:我的
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>
and the onSelectCheckbox(row)
logic in my component.ts
as well as my button to test and show the selected rows in my console:和我的
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);
}
I'm sure there is a better and smarter way to do this but I could not find any useful resources to do this, any guidance would be appreciated.我确信有更好、更聪明的方法可以做到这一点,但我找不到任何有用的资源来做到这一点,任何指导都将不胜感激。
to get whole selected elements at once you can use SelectionModel要一次获取整个选定元素,您可以使用 SelectionModel
SelectionModel from @angular/cdk/collections
来自 @angular/cdk/collections 的 SelectionModel
Here I created stackblitz check this https://stackblitz.com/edit/angular-jlk4vf-spkxv2在这里我创建了 stackblitz 检查这个https://stackblitz.com/edit/angular-jlk4vf-spkxv2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.