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

}

我现在正在尝试的是：在miner-view.component.ts的ngOnInit中，将矿工的编号发送到miner-card.component.ts。然后，在miner-card.component.ts中，我订阅该服务以获取矿工号。然后，我设置this.miner = miner来使每个矿工的块独立。但是我得到的只有10。我猜只是取最后一个数字，然后将其放入所有块中。

此刻是这样的：如果我向右滚动，标题始终会显示“ Block von Miner 10”。

Answer 1

我想它只是取最后一个数字并将其放入所有块中。

是的，你猜对了。通过拥有

 this.emitTransactionService.miner$.subscribe(miner => this.miner = miner);

在您的MinerCardComponent中，每次此Observable发出新的矿工时，将组件每个实例的miner变量设置为this.emitTransactionService.miner$所发射的矿工。因此，最后发出的矿工将始终设置为miner中的MinerCardComponent变量。

您必须问自己：

MinerCardComponent创建时需要什么数据，然后在组件的整个生命周期内都不会改变？
MinerCardComponent的哪些数据将在一生中更新组件的时间以及这些更新的来源（组件本身，父组件，应用的其他组件）

如果您只想将矿工号从父级（MinerViewComponent）传递给子级（MinerCardComponent），而不在应用程序的其他任何地方使用this.emitTransactionService.miner$，则不要不必使用服务。对于简单的父子数据共享，我建议使用@Input属性（请参阅：Component Interaction）。

其他说明：

您的代码在某些方面令人困惑。

MinerViewComponent

使用[block]="block"，您将绑定到block中名为MinerCardComponent的输入变量，但是block中没有名为MinerCardComponent的输入变量！ / li>
为什么您的block中有一个MinerViewComponent变量？我看不到您需要的地方。
在addCard()中，将新对象添加到blocks数组中，返回全局变量this.block（应该是undefined，因为我看不到设置的位置它），然后在ngOnInit中，当您从1开始创建索引时，将此返回的块设置为blocks数组中的下一个位置。
为什么要定义全局变量blockHash: string; transactions: Transaction[]; previousBlock: string; blockNumber: number; miner: number;？我看不到您需要它们的地方！

MinerCardComponent

您有很多全局变量。考虑将其中的一些组合在一个界面中。
temp不一定必须是全球性的。

如果您弄清楚了这些内容，我将使用一些我认为应该是什么样的代码来更新答案。

如何用一个组件创建多个独立的物料卡？

1 个答案:

其他说明：