Как поменять карты материалов, созданные одним компонентом? - PullRequest
Новая
       10

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

0 голосов
/ 31 января 2019

Я пытаюсь переключаться между карточками материалов нажатием кнопки.Как мне это реализовать?

После небольшого кода и скриншотов:

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 карт.Нажав на одну из этих 2 кнопок, я вызываю previousingBlock (), который должен отобразить предыдущий блок, а другая кнопка должна вызвать 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.

Вот как это выглядит: если я нажму на <, должно появиться «Block of Miner 9». </p>

enter image description here

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Я только что решил это с помощью 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++;
  }
0 голосов
/ 31 января 2019

Я все еще не совсем уверен в том, чего вы пытаетесь достичь.Я думаю, что было бы неплохо предоставить более приятный код и, возможно, какое-то упрощенное приложение в stackblitz (или любой другой песочнице).Многое зависит от того, где вы показываете свои карты, это в основном компоненте?Это вложено в?

На данный момент я создал что-то вроде этого: ссылка на стек

...