html - 如何在单击按钮时创建 Material 卡？

Question

我正在尝试在单击按钮时创建垫卡。

这是信息，应该在 mat-card 中(此信息来自服务)。

blockHash: "iejg5gpylg6l9gjxor3bnvigs0ipaonr"

blockNumber: 1

previousBlock: "00000000000000000000000000000000"

transactions: Array (1)
0 {sender: "10", recipient: null, amount: null, fee: null}

在该部分的开头，垫子卡片所在的位置应该是完全空的。单击按钮时，该部分应填充一张垫卡；再次点击时，应该会出现第二张垫卡，依此类推。

这是包含信息的 block (在另一个组件中)，它被发送到组件，该组件应该将 Material 卡加起来。

它应该是这样的(目前只是硬编码)。

有什么优雅的方法可以做到这一点？

Answer 1

您应该创建一个显示多个 card-components 的 parent-component。

https://stackblitz.com/edit/angular-zvjblo

父组件

parent-component 包含您的 block 列表，并通过为每个 card-component 提供 block 数据来显示多个 card-components那张卡还有一个按钮可以将新 block 添加到列表中。

模板

<button (click)="addCard()">Add Card</button>
<app-block-card *ngFor="let block of blocks" [blockData]="block"></app-block-card>

代码

import { Component, OnInit } from '@angular/core';
import { BlockData } from './block-data';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  blocks: BlockData[];

  ngOnInit() {
    this.blocks = [];
  }

  addCard() {
    this.blocks.push({
      blockHash: '9348534985720587',
      blockNumber: 3,
      previousBlock: "0000",
      transactions: [
        {
          sender: 'sender',
          recipient: 'recipient',
          amount: 1,
          fee: 200
        }
      ]
    });
  }

}

卡片组件

card-component从父组件接收一个 block 的数据并显示。

模板

<mat-card class="card">
  <p>{{blockData.blockHash}}</p>
  <p>{{blockData.blockNumber}}</p>
  <p>{{blockData.previousBlock}}</p>
  <p>{{blockData.transactions | json}}</p>
</mat-card>

代码

import { Component, OnInit, Input } from '@angular/core';
import { BlockData } from '../block-data';

@Component({
  selector: 'app-block-card',
  templateUrl: './block-card.component.html',
  styleUrls: ['./block-card.component.css']
})
export class BlockCardComponent implements OnInit {

  @Input() blockData: BlockData;

  constructor() { }

  ngOnInit() {
  }

}