Mat Table 获取每一行的多个值

Question

我有一个 mat table 通过 firestore 通过 observable 作为其数据源连接。

  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>

component.ts


  loadToPayment(rows:unpaidModel) {
    console.log(rows)
    this.detailstoPay = rows;
  }

如果我控制台日志，我可以看到有关该帐户的全部信息。

但是，如果我想最多单击三行并同时加载所有内容（例如添加到购物车功能），我想就我能做什么寻求帮助。

感谢您的宝贵时间。

Answer 1

例如，您可以为每一行添加 multi-select 复选标记。在 selecting 所需的行之后，您将点击一个按钮（很像您现在为每一行设置的按钮），该按钮将 processAllRows();

如何为多个 select 添加复选框示例：https://stackblitz.com/edit/angular-mat-table-selection

在 checking/unchecking 行后将其添加到 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());
  }
}

之后您可以删除该行或删除复选标记 - 无论接下来会发生什么。

Mat Table 获取每一行的多个值

Mat Table getting multiple values of each row

angular-material

angular