如何创建包含两个组成部分的包含不同信息的物料卡？

Question

当前，我正在尝试设置10张物料卡，其中应包含不同的信息。问题是，如果我在卡之间切换，卡中的信息将被重置。

这是空卡的样子：

在该区块中，我可以放置交易：

这是下一个块：

因此，如果我现在从第2块切换到第1块，则第1块看起来像图1中的块。第1块中的事务会丢失。

遵循这两个组件的代码：

Miner-card.component显示一张带有内容的卡。

miner-card.component.ts：

const ELEMENT_DATA: Transaction[] = [
];

export class MinerCardComponent implements OnInit {

  @Input() miner: number;
  @Input() blockHash: string;
  @Input() blockNumber: number;
  @Input() previousHash: string;
  @Input() transaction: Transaction;

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

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
  }

  ngOnInit() {
    this.emitTransactionService.row$.subscribe(transaction => {
        this.transaction = transaction;
        this.temp = this.dataSource.data.slice();
        this.temp.push(this.transaction);
        this.dataSource.data = this.temp;
        this.ref.detectChanges();
      }
    );
    this.temp = this.dataSource.data.slice();
    this.temp.pop();
    this.dataSource.data = this.temp;
    this.ref.detectChanges();
  }

  /** This method puts the block from the active miner in the blockchain (when he got the proof-of-...). **/
  sendBlockToBC() {
  }

  sendMessage(): void {
  }



  /** This method creates a random string of the alphabet [a-z0-9] to demonstrate a block hash out of 32 digits.
   * Also this method contains an array of all block hashes, to track the previous block hashes. **/
  generateBlockHash() {
}

miner-card.component.html：

<mat-card class="overflow">
  <mat-card-title>Block von Miner {{ miner }}</mat-card-title>
  <mat-card-header>
    <mat-card-subtitle>Block</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{ blockNumber }}</p>
  </mat-card-content>
  <mat-card-header>
    <mat-card-subtitle>Transaktionen</mat-card-subtitle>
  </mat-card-header>
  <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>
  <mat-card-header>
    <mat-card-subtitle>Vorheriger Block</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{previousHash}}</p>
  </mat-card-content>
  <mat-card-header>
    <mat-card-subtitle>Hash</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{blockHash}}</p>
  </mat-card-content>
</mat-card>

Miner-view.component是应该在所有10张卡之间切换的组件。

miner-view.component.ts：

export class MinerViewComponent implements OnInit, OnDestroy {
  block: Block;
  blocks: Block[];
  blockHash = this.generateFirstHash();
  transactions: Transaction[];
  previousBlock: string;
  blockNumber = 1;
  miner: number;
  minerCounter = 1;

  message: any;
  subscription: Subscription;

  transaction: Transaction;

  addCard(miner: number, blockHash: string, blockNumber: number, transactions: Transaction[],
          previousBlock: string) {
    this.blocks.push({
      miner: miner,
      blockHash: blockHash,
      blockNumber: blockNumber,
      previousBlock: previousBlock,
      transactions: transactions
    });

  }

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      this.message = message;
      this.clearBlock();
      this.raiseBlockNumber();
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  ngOnInit() {
    this.blocks = [];
    for (let i = 0; i < 11; ++i) {
      this.addCard(i, this.generateFirstHash(), 0,
        undefined, '00000000000000000000000000000000');
    }
  }

  generateFirstHash() {
  }

  /** This method clears the current block of the miner (transactions only), when a new block has been added to the
   * blockchain. **/
  clearBlock() {
  }

  /** This method increments the block number, after a block has been successfully mined. **/
  raiseBlockNumber(): number {
  }

  precedingBlock() {
  }

  nextBlock() {
  }

}

我的猜测：当我在卡之间进行切换时，miner-view-component会将miner-card-component重置回标准值。 如何使卡独立于2个组件？