Как создать несколько независимых карт материалов с одним компонентом?

Question

Я пытаюсь настроить 10 карт материалов, которые содержат различную информацию.Также все эти карты должны иметь свой собственный источник данных.Мне удалось получить все карты в компонент, но все они имеют одинаковую информацию.

У меня есть сеть, состоящая из 10 узлов.Каждый из этих узлов должен иметь свой собственный блок с собственным источником данных.

Miner-view.component.html: это компонент, который я использую для загрузки карт

<div class="blocksWrapper">
  <app-miner-card *ngFor="let block of blocks" [block]="block" ></app-miner-card>
</div>

Miner-view.component.ts:

export class MinerViewComponent implements OnInit {
  block: Block;
  blocks: Block[];
  blockHash: string;
  transactions: Transaction[];
  previousBlock: string;
  blockNumber: number;
  miner: number;

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

  constructor(private emitTransactionService: EmitTransactionService) { }

  ngOnInit() {
    this.blocks = [];
    for (let i = 1; i < 11; i++) {
      this.blocks[i] = this.addCard(this.miner = i, this.blockHash = '00000000000000000000000000000000', this.blockNumber = 0,
        this.transactions = undefined, this.previousBlock = '');
      this.emitTransactionService.emitMiner(i);
    }
  }

}

Miner-card.component.html:

<mat-card>
  <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>

Miner-card.component.ts:

export class MinerCardComponent implements OnInit, OnDestroy {

  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\[\] = \[\];
  miner: number;

  message: any;
  subscription: Subscription;

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

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

  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.emitTransactionService.miner$.subscribe(miner => {
      console.log(miner);
        this.miner = miner;
      }
    );
    this.temp = this.dataSource.data.slice();
    this.temp.pop();
    this.dataSource.data = this.temp;
    this.ref.detectChanges();
  }

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

  sendMessage(): void {
  }

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

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

  generateFirstHash() {
  }

  /** 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() {
  }

}

Что я сейчас пытаюсь: в ngOnInit of miner-view.component.ts Я отправляю номер майнера на майнер-card.component.ts.Затем в miner-card.component.ts я подписываюсь на сервис, чтобы получить номер майнера.Затем я устанавливаю this.miner = miner, чтобы сделать блоки индивидуальными для каждого майнера.Но все, что я получаю, это 10. Я думаю, он просто берет последнее число и вставляет его для всех блоков.

Вот как это выглядит в данный момент: если я прокручиваю вправо, заголовок всегда говорит: «Блок фон Майнер 10 ".