如何在由一个组件创建的物料卡之间交换？

Question

我正在尝试通过单击按钮在物料卡之间交换。我该如何实现？

下面是一些代码和屏幕截图：

miner-view.component.html：此组件应容纳所有10张卡

<button mat-raised-button (click)="precedingBlock()"><</button>
<button mat-raised-button (click)="nextBlock()">></button>
<div class="blocksWrapper">
  <app-miner-card></app-miner-card>
</div>

miner-view.component.ts：目前，我创建了10张卡片。通过单击这两个按钮中的一个，我调用了beforeBlock（），它应该显示前一个块，另一个按钮应该调用nextBlock（），它应该显示下一个块。

export class MinerViewComponent implements OnInit {
  minerCounter = 1;

  addCard(miner: number, blockHash: string, blockNumber: number, transactions: Transaction[],
          previousBlock: string): Block {
  }

  constructor(private emitTransactionService: EmitTransactionService) { }

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

  precedingBlock() {
    this.minerCounter--;
    this.blocks[this.minerCounter];
  }

  nextBlock() {
    this.minerCounter++;
    this.blocks[this.minerCounter];
  }

}

这是我目前尝试的方法，但是html和ts中缺少某些内容。

它是这样的：如果我单击<，它应该显示“矿工9块”。

Answer 1

对于您要实现的目标，我仍然不确定。我认为最好提供一些更好的代码，或者在stackblitz（或任何其他沙箱）中提供一些简化的应用程序。在很大程度上取决于您在哪里显示卡，它在主要部分中吗？它嵌套在吗？

在这一点上，我已经创建了这样的东西：stackblitz link

Answer 2

我刚刚用ngSwitch解决了这个问题

<button mat-raised-button (click)="precedingBlock()"><</button>
<button mat-raised-button (click)="nextBlock()">></button>
<div class="blocksWrapper" [ngSwitch]="minerCounter">
  <app-miner-card *ngSwitchCase="1">{{blocks[0]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="2">{{blocks[1]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="3">{{blocks[2]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="4">{{blocks[3]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="5">{{blocks[4]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="6">{{blocks[5]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="7">{{blocks[6]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="8">{{blocks[7]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="9">{{blocks[8]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="10">{{blocks[9]}}</app-miner-card>
</div>

根据交换卡的数量：

  precedingBlock() {
    this.minerCounter--;
  }

  nextBlock() {
    this.minerCounter++;
  }