从 DataSource Angular MatTable 获取对象

Question

我有一个 material 数据 table 并从查询中获取数据以显示它。这是我的交易-history.component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { Transaction } from '../models/transaction';
import { TransactionService } from '../services/transaction.service';
import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-transaction-history',
  templateUrl: './transaction-history.component.html',
  styleUrls: ['./transaction-history.component.css']
})
export class TransactionHistoryComponent implements OnInit {

  dataSource = new TransactionDataSource(this.transactionService);

  displayedColumns = ['id', 'cust', 'mgrName', 'dept', 'timestamp'];

  constructor(public transactionService: TransactionService) { }

  ngOnInit() {
  }
}

export class TransactionDataSource extends DataSource<any>{
  constructor(private transactionService: TransactionService) {
    super();
  }
  connect(): Observable<Transaction[]> {
    return this.transactionService.getUploaded();
  }
  disconnect() { }
}

这完美地显示了数据。但现在我想获取显示在每一行中的事务对象。现在 dataSource 正在获取一个 Transactions 列表，但我如何才能访问该列表？我还没有在 dataSource 对象上找到任何可以执行此操作的方法。

提前致谢。

Answer 1

您始终可以保存最新数据的副本并通过 public 属性公开它。像这样：

export class TransactionDataSource extends DataSource<any>{
  public data: Transaction[];
  constructor(private transactionService: TransactionService) {
    super();
  }
  connect(): Observable<Transaction[]> {
    return this.transactionService.getUploaded().pipe(
      tap((data) => this.data = data),
    );
  }
  disconnect() { }
}

这样做的一个缺点是对数据属性的修改不会反映在 table 中。

从 DataSource Angular MatTable 获取对象

Get object from DataSource Angular MatTable

datasource

angular-datatables

angular