Как создать карточки материалов, содержащие разную информацию, с двумя компонентами?

Question

В настоящее время я пытаюсь настроить 10 карт материалов, которые должны содержать различную информацию.Проблема в том, что если я переключаюсь между карточками, информация в карточках сбрасывается.

Вот так выглядит пустая карточка:

В этот блок я могу поместить транзакции:

Это следующий блок:

Поэтому, если я сейчас переключусь с блока 2 на блок 1, блок 1 будет выглядеть как блок на рисунке 1. Транзакции в блоке 1 будут потеряны.

После кодаиз 2 компонентов:

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 сбрасывает компонент карты майнера обратно к стандартным значениям.Как сохранить независимость карт с 2 компонентами?