Question

我得到了一个组成部分，在其中将信息填充到数据表中。物料卡如下所示：

我想在另一个组件中放入完全相同的信息。一切正常，除了数据表。我不太确定如何解决该问题。遵循目前的样子：

遵循一些代码：

组件的

TS，信息应存放在哪里。我需要使用我认为的dataSource，因为我正在将它用于其他组件。我正在使用@Input获取从其他组件发送的块。但是，如何将所有事务放入ELEMENT_DATA中，使其显示在表中？

export class BlockCardComponent implements OnInit {

  displayedColumns: string[] = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);


  @Input() block: Block;
}

该组件的HTML片段：此刻，我只是在这样做。

 <mat-card-content>
    <p>{{block.transactions | json}}</p>
  </mat-card-content>

组件的TS，信息来自：

export class MinerViewComponent implements OnDestroy, OnInit {
  transaction: Transaction;
  displayedColumns: string[] = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);
  temp: Transaction[] = [];
  blockNumber = 1;
  previousHash = '00000000000000000000000000000000';
  blockHash: string = this.generateFirstHash();
  blockHashList: string[] = [];

  message: any;
  subscription: Subscription;

  constructor(private _TS: TransactionPoolToMinerService, private ref: ChangeDetectorRef,
              private toolbarToMVService: ToolbarToMVService, private _MS: MinerViewToBlockchainService) {
    this.subscription = this.toolbarToMVService.getMessage().subscribe(message => {
      this.message = message;
      this.sendBlockToBC();
      this.clearBlock();
    });
  }
sendBlockToBC() {
    const block = new Block(this.blockNumber, this.temp, this.previousHash, this.blockHash);
    this._MS.emitTransaction(block);
    console.log(block);
    this.dataSource = undefined; // to empty the table in the miner view component
    this.dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA); // create new datasource to fill the table,
    // since the old one gives an error
    this.generateBlockHash();
    this.raiseBlockNumber();
  }
}

该组件用于数据表的HTML：

 <mat-card-content>

    <div>
      <table mat-table [dataSource]="dataSource" class="example-container mat-elevation-z8">
        <ng-container matColumnDef="sender">
          <th mat-header-cell *matHeaderCellDef> Sender </th>
          <td mat-cell *matCellDef="let element"> {{element.sender}} </td>
        </ng-container>

        <ng-container matColumnDef="recipient">
          <th mat-header-cell *matHeaderCellDef> Empfänger </th>
          <td mat-cell *matCellDef="let element"> {{element.recipient}} </td>
        </ng-container>

        <ng-container matColumnDef="amount">
          <th mat-header-cell *matHeaderCellDef> Betrag </th>
          <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
        </ng-container>

        <ng-container matColumnDef="fee">
          <th mat-header-cell *matHeaderCellDef> Gebühr </th>
          <td mat-cell *matCellDef="let element"> {{element.fee}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

  </mat-card-content>

如何将数据表内容从一个组件发送到另一组件？

0 个答案: