我有一個 mat 表，通過一個可觀察的作為其資料源通過 firestore 連接。
detailstoPay: unpaidModel;
ngOnInit(): void {
this.customerService.getUnpaid().subscribe(unpaidObs => {
this.unpaidList = unpaidObs;
this.dataUnpaidSource = new MatTableDataSource(unpaidObs)
});
}
如果我單獨單擊一個，我可以獲取資料并對其進行處理，因為我在 Mat Table 下方添加了一個單擊功能
<tr mat-row *matRowDef="let row; columns: displayedUnpaidColumns;"
(click)="loadToPayment(row)"></tr>
組件.ts
loadToPayment(rows:unpaidModel) {
console.log(rows)
this.detailstoPay = rows;
}
如果我控制臺日志，我可以看到有關該帳戶的全部資訊。
但是，如果我想單擊最多三行并同時加載所有內容，例如添加到購物車功能，我想就我能做的事情尋求幫助。
感謝您的時間。
uj5u.com熱心網友回復：
例如，您可以為每一行添加多選復選標記。選擇所需的行后，您將點擊一個按鈕（很像您現在為每一行所擁有的按鈕），該按鈕將處理AllRows();
如何為多選示例添加復選框：https : //stackblitz.com/edit/angular-mat-table-selection
- 在選中/取消選中一行時，將其添加到checkedRows 陣列中。
<mat-checkbox
class="example-margin"
(change)=addOrRemoveRow($event)>
I'm a checkbox
</mat-checkbox>
checkedRows: any = [];
addOrRemoveRow(event: any) {
if (!checkedRows.includes(event.value)) {
this.checkedRows.push(event.value
} else {
this.checkedRows.splice(this.checkedRows.indexOf(event.value), 1)
}
}
- processAllRows() 將一一處理行，同時從陣列checkedRows 中洗掉它們。
processAllRows() {
for (let row of selectedRows) {
loadToPayment(selectedRows.pop());
}
}
然后，您可以隨后洗掉該行或洗掉復選標記 - 無論接下來會發生什么。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420572.html
標籤：